Sticky Menu

Hi Jovan,

You can use the following CSS to keep the menu fixed to the top of the screen:

@media all and (min-width: 900px) {

  .site-header {
    position: fixed;
    z-index: 9;
    width: 100%;
	top: 0;
	left: 0;	
	background: white;
  }
  .admin-bar .site-header {
	top: 32px;
  }
}

Please copy and paste that code into the “Additional CSS” section in the Customizer (Appearance > Customize). Once added there, it should take effect right away.

Hi Ben

Thank you very much for your fast answer & solution. With the CSS the menu is fixed, but the sidebar (widgets) is no longer in the old structure (now above the menu). Do you see any chance to fix this?

Best regards
Jovan

I see what you mean. The following CSS might need a modification, but try adding this now:

@media all and (min-width: 900px) {

  .site-header,
  .sidebar-primary {
    position: fixed;
    z-index: 9;
    width: 100%;
    top: 0;
    left: 0;	
    background: white;
  }
  .admin-bar .site-header {
    top: 32px;
  }
  .sidebar-primary {
    top: 126px;
  }
  .admin-bar .sidebar-primary {
    top: 158px;
  }
}

The 126px value in this part may need to be adjusted up/down to line up right on your site:

.sidebar-primary {
  top: 126px;
}

And then this part should be the same exact value plus 32:

.admin-bar .sidebar-primary {
  top: 158px;
}

That’s so it moves down the height of the admin toolbar when you’re logged in and viewing the site.

Hi Ben

Thank you so much for your support! It works with adjusted value!
There’s only one thing: the title from the first post on archive or single post goes under the menu. Is it possible to adjust this?

Best regards & thanks again!
Jovan

Okay cool, try adding this bit into the existing media query:

.main {
  margin-top: 60px;
}

That value may be adjusted too – it depends on the height of your header. It should push everything down so the header doesn’t overlap any of the content.

Hi Ben

Thank you again so much!!! Everything works!

Best regards
Jovan

Sure thing, happy to help ??