• 0
Sign in to follow this  
Followers 0

Customising the header section


Question

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

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 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny

 

You are spot on: 

concept_banner.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem Keith.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0