Support » Fixing WordPress » Full width nav bar on Twenty Twelve

  • Hi,

    I am trying to make the nav bar on my Twenty Twelve-themed blog fill 100% of the page (I want the navigation elements to be narrower, but the bar itself should stretch out to the background on either side).

    I have a child theme set up, and my thinking was that if I took <nav id="site-navigation"> outside of the header (so its parent was <div id="page">) and styled it:

    display: block;
    float: left;
    width: 100%;

    Then it should fill the entire of <div id="page">. But it does not. So I must’ve done something wrong – or this is not the right approach.

    The site is live here: http://thirdbreakfast.com/

    Please advise!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Create a child theme first, otherwise with update everything will go away. First make the main container to 100 with :

    .site {
    margin: 0px auto;
    max-width: auto;
    overflow: hidden;
    }

    Find the .site in CSS and change the max-width to auto. There is value by default.

    If I take the whole of the header and navigation menu outside of <div id="page"> then I can probably do this, but it would require lots of margins and stuff – there should be a simple way to get <nav id="site-navigation"> to fill <div id="page">, right?

    Thanks Abhishek – I’ve added that to the style.css of my child theme but it doesn’t seem to have done anything. Have I done something wrong?

    Its still loading max-width: 68.57rem; from the import function in Child Theme or may be wp cache. Clear caches, preload it etc.

    Clear browser cache and cookies and reload the page.

    Should it be to do with the “site” container?

    Sorry Abhishek – I can’t get it to override 68.57rem, even with !important.

    Is auto definitely a valid value for max-width? Inspector is saying it’s not, and W3 seems to say that only none, length, % or inherit are valid.

    WPyogi

    (@wpyogi)

    Forum Moderator

    You will need to put a negative margin on this element to override the padding on the containing element:

    .main-navigation {
        display: block;
        float: left;
        margin: 0 -2.85714rem;
        width: 100%;
    }

    You may want to put that entire section inside a media query – check the responsiveness.

    Thanks WPyogi – that does work, but only if I up the width to 108.4%.
    I feel like there must be some way to just get it to fill the containing element at 100% surely?

    Here’s the final code I’ve used to get it just where I want it. Thanks for your help WPyogi!

    .main-navigation {
      width:108.4%;
      margin: 0 -2.85714rem;
    }
    
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
        padding-left: 2.85714rem;
    }
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Full width nav bar on Twenty Twelve’ is closed to new replies.