Menubar always on top – Twenty Fourteen

  • Author
    Posts
  • #1817251

    pvaneijck
    Member

    Hi,

    When I’m on my laptop or tablet, the menubar always stays on top of the screen when scrolling down. On my phone it does not.

    Is there a CSS code which let me have the menubars stay on top across devices (so also on mobile phone?)

    Thanks!

    The blog I need help with is pvaneijck.wordpress.com.

    #1817349

    Hi there, add the following CSS which will “fix” the menu to the top when the minified menu is active. I’ve also done that for the top admin bar (when present) so it operates like it does on wider browsers/devices.

    @media screen and (max-width: 782px) {
        .site-header {
            position: fixed !important;
        }
        #wpadminbar {
            position: fixed !important;
        }
    }
    #1817353

    pvaneijck
    Member

    That worked like a charm!! Thanks :)

    #1817356

    You are welcome.

    #1817379

    pvaneijck
    Member

    Well this is odd: the menu bar doesn’t stay on top on my tablet & laptop anymore. Mobile is fine.

    #1817381

    The code I gave above only fixes the menu when the minified menu is active, and on widths greater 782px, the normal full menu is active. I’ve having some issues with my responsive layout viewports showing my changes, but add the following at the very top of your CSS and see if that fixes the full menu. It looks like it will.

    .site-header{
        position:fixed !important
    }
    
    #wpadminbar{
        position:fixed !important
    }
    #1817382

    pvaneijck
    Member

    That worked :)

    Thank you very much for sharing your knowledge! You have been of great value, for which I am grateful.

    #1817383

    pvaneijck
    Member

    Well – every change I make, seems to break something else :D lol
    Now the Sub Title disappears behind the menu/ navigation bar.

    Any way to get the SubTiltle to show correctly?

    #1817384

    pvaneijck
    Member

    fixed it:

    .site-description {
    	margin-top: 75px;
    	margin-bottom: 100;
    }
    #1817385

    Great, glad it’s fixed. Not sure what happened to change that from what we had originally. The important thing is all is good again.

The topic ‘Menubar always on top – Twenty Fourteen’ is closed to new replies.