Menubar always on top – Twenty Fourteen

• 

  pvaneijck · Member · May 8, 2014 at 1:13 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · May 8, 2014 at 4:04 pm

  • Copy link

  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;
      }
  }

• 

  pvaneijck · Member · May 9, 2014 at 9:13 am

  • Copy link

  That worked like a charm!! Thanks :)

• 

  thesacredpath · Member · May 9, 2014 at 5:51 pm

  • Copy link

  You are welcome.

• 

  pvaneijck · Member · May 12, 2014 at 10:48 pm

  • Copy link

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

• 

  thesacredpath · Member · May 13, 2014 at 4:01 pm

  • Copy link

  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
  }

• 

  pvaneijck · Member · May 14, 2014 at 8:29 am

  • Copy link

  That worked :)

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

• 

  pvaneijck · Member · May 14, 2014 at 10:11 am

  • Copy link

  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?

• 

  pvaneijck · Member · May 14, 2014 at 10:26 am

  • Copy link

  fixed it:

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

• 

  thesacredpath · Member · May 14, 2014 at 5:34 pm

  • Copy link

  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.