Customising the header section

[Keith Vaugh+ 14]

Hi Folks.

I am wondering if might lend your expertise once again.

 

I am trying to modify the header on our site www.magva.com (latest version of Framework and WP). It is a brandnav section and the aesthetic that is on the site at the moment is pretty close to what I want. However I am sure there is a better way to achieve it.

 

It was necessary for me to create the logo having the full width of the page i.e. 1040px * 90px. - Is it possible to center it some how and have the logo as simple 340px * 90px (its original size)?

 

The larger width of the logo caused the nav element to wrap onto the next line - which is what I required (the reason of the larger width).

 

I have used the following CSS code to achieve the look:

/* sets the branding nav header to full width */

#site .section-brandnav .texture {
    max-width: 100%;
	background: #1c0c09;
}
 
#site .section-brandnav .content {
    background-color: #1c0c09;
}

/* this changes the font size of the Nav bar, its position and the colour of the menu drop downs */

#site .section-brandnav .brandnav-nav {
  float: none;
}

#site .main_nav li a { font-size: 15px; }
#site .main-nav .menu-item ul li a { color: #ffffff; }
#site .main-nav .menu-item li:hover a { color: #ff4000; }
#site ul.sf-menu li a { padding: 10px 36px 10px; }

My biggest issue with this approach is the padding I had to use. Really I wanted the buttons to spread out over the page and be centered. Now when you look at some of the drop downs, the text is wrapping which I'd like to avoid. Also causes problems on mobiles.

 

I'm not adverse to using an alternative nav bar if I can achieve the aesthetic. 

[Rob 547]

Hi Keith,

 

You could try:

#site .section-brandnav .brandnav-nav {
margin-left:auto;
margin-right:auto;
width:98%;
}
.section-brandnav .mainlogo-link img {
    max-width: 100%;
    text-align: center;
}

The only problem may be that Brandnav is designed to work a certain way and it may not work as desired.  The CSS may not work correctly 

[Keith Vaugh+ 14]

Thanks Rob. Gave it go, but no luck. 

 

Is there any other branding section that might allow it? It doesn't have to be brandnav... Was thinking that a option might be to add a content section to the top of the page and then use the classic nav bar, but want to be able to have the bar fill the width of the screen.

[Danny 1,327]

Not sure what you're trying to achieve?

 

Are you saying you want your logo image centred and then below it your Menu ?

 

If my assumption isn't correct, can you provide a concept image please.

[Rob 547]

Use a Full-Width Sidebar. Add a text widget.  Add the link and image code to the text widget.  That will work.

[Keith Vaugh+ 14]

Hi Danny

 

You are spot on: 

[Rob 547]

As I mentioned, you coulld place a Full-Width Sidebar there, in Drag & Drop, then use a text widget.  If you don't have Full-Width available, try Universal. Either will work, and if neither are available, the Content Box would work too.

[Keith Vaugh+ 14]

Thanks Rob. May give it ago if we've no luck

[Rob 547]

No problem Keith.