WordPress.org

Ready to get started?Download WordPress

Forums

TwentyTwelve: Moving navbar menu to be flush with top of page. (10 posts)

  1. mcjeffs
    Member
    Posted 1 year ago #

    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)
    Title
    Tag-line
    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!
    Thanks

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Link to your site?

  3. mcjeffs
    Member
    Posted 1 year ago #

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  6. mcjeffs
    Member
    Posted 1 year ago #

    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 :)

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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!

  8. mcjeffs
    Member
    Posted 1 year ago #

    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:

    http://fullspectrumstrategy.com/

    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?

    Thanks

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  10. mcjeffs
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.