Support » Themes and Templates » TwentyTwelve: Moving navbar menu to be flush with top of page.

  • I’d like to move the main twenty twelve navbar menu from its default position to the very top of the page area.

    I’d like it to be flush so that there is no space between the navbar and the top of the page. Eventually I will style the navbar to be dark grey so its important that there is no space around it at all.

    So the eventual layout when viewed on a wide screen would be like this:

    Background image/top margin
    Start of actual “page”
    Navbar (flush with start of page)
    Rest of site content

    I’ve got a child theme setup where I have been making (very minor) changes already.

    Very appreciative for any help!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Link to your site?

    Do you have a copy of header.php in your child theme? Have you changed it at all yet?

    Also, do you want no space on the sides? i.e. it goes beyond the “page” width (white portion of page)?

    Hi, I’ve not changed header.php – its the default file.

    And I would like it to not go beyond the page – just to sit flush with the top and edges of the white portion.

    Thanks for your help 🙂

    Okay, I think this ought to do that – make a copy of your header.php file in the child theme and make this change – move this section:

    <nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
    			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->

    to just below this line:

    <div id="page" class="hfeed site">

    And then in the style.css file (of your child), add this CSS:

    @media screen and (min-width: 600px) {
    .site-header {
        padding-top: 0;
    .main-navigation {
        margin-top: 0;

    See if that’s what you want and test in various pages and devices to see if it’s behaving!

    Thanks that is almost exactly what I’m after. Very much appreciated 🙂

    I’ve made the changes on my page and had a quick go at styling the bar and links. What I do need to do is make the navbar stretch to the very edges of the white page – at the moment it is stopped by the main page margins:

    What’s the best way to achieve that?

    I’ve also noticed that when the window is resized, all seems OK until the screen becomes less than 600px. When that happens, a grey margin appears at the top of the screen. Any way to stop that so when viewed in a small window/phone the page is just white?


    You can try putting negative margins in the same measure as the padding on the #page div – not sure that will work correctly in all sizes, etc. Otherwise, you’ll need to move the navigation outside the #page div and that’s going to get a bit more complicated, I think.

    margin-left: -2.85714rem;
    margin-right: -2.85714rem;

    Seems to work in Firebug…but not tested elsewhere.

    Great, that seemed to work great. I had to make a few more minor changes, removing the light top and bottom borders on the li elements of the table but its really starting to take shape how I want.

    The thing that is troubling me is the behavior at small screen sizes. I’m not sure if its something about the way I’ve written stuff in the child theme, but when the page is narrowed – a margin appears at the top and the menu switches to an expanded list view.

    I’ve also got the problem that when the page is wide, I need the fonts on the nav menu to be near “white” so that they show up on the black bar. But when the page narrows and they are listed, they need to be “black” – I’m sure this is possible, but can you advise what to change… Still getting to grips with responsive designs especially.

    Thanks a lot!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘TwentyTwelve: Moving navbar menu to be flush with top of page.’ is closed to new replies.