Jump to content

Archived

This topic is now archived and is closed to further replies.

Keith Vaugh

Customising the header section

Recommended Posts

Keith Vaugh+    14
Keith Vaugh

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
Rob    547
Rob

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 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

Hi Danny

 

You are spot on: 

concept_banner.jpg

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Keith Vaugh+    14
Keith Vaugh

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

No problem Keith.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • briana
      By briana
      I want to highlight the DONATE menu item in my navigation (www.stilleasierthanchemo.com) by default without the user having to hover over the link. I've attached an example of what I'd like it to look like (run4massey.org). How do I change the background color of the DONATE link without changing the background color of the entire BrandNav menu list?
       
       
    • chasenet
      By chasenet
      I'd like to include the twitter icon on the nav of this site: http://192.185.73.118/~fosterwi/
       
      The icons don't show at all with just BrandNav in the drag and drop header. If I use a different nav (that shows the icons) the actual nav bar is no longer where I want it. 
       
      How can I get it to look like the attached image?
       
      Any help much appreciated.
       
      Latest WP and PL
    • jennajonesdesign
      By jennajonesdesign+
      Hey Guys!
       
      I actually have the developer edition, however it does not seem to let me post there. 
       
      In my sections I do not have an option for branding or brandnav? Is this just me? I see that section in the demo, but nothing on my installation. I attached a screen capture so you can see for yourself. Let me know what I am missing!
       
      Thanks. 
       
      Jenna
    • lakersalex
      By lakersalex
      I'm not sure how or when it happened, but this website I built a while back is now missing the drop down menu and arrows in Safari only. Chrome and Firefox are working fine.   Website: http://www.marcselwynfineart.com   Framework Version: 2.4.1   WordPress Version: 3.5.1   Plugins in Use:  wordfence use-google-libraries sucuri-wp-plugin reveal-ids-for-wp-admin-25 post-types-order portfolio-slideshow-pro pagelines-sections pagelines-googlefonts pagelines-customize launchpage google-sitemap-generator duplicator display-posts-shortcode contact-form-7 cloudflare better-wp-security   Any clue what might be happening?
    • relyon
      By relyon
      I'm designing (not so much a coder!) a site for a client that requires the BrandNav instead of the NavBar. When I switched to the BrandNav, the search box went away, but I still need that functionality. How would I get a search box at the end of my BrandNav?
       
      Thanks!
×