Sticking bootstrap menu in wordpress

Question

I have this menu in Wordpress (it's based on bootstrap)and I want it to stick to top when scrolled, but have some content on top of the menu:

Image: Code:

<div class="menu-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-3">
<a class="navbar-brand" href="https://x">
<img src="logo" alt="Logo" class="img-responsive" title=" Logo">
</a>
</div>
<div class="col-lg-9">
<nav id="site-navigation" class="main-navigation text-right" role="navigation">
<div class="menu-menu-1-container"><ul id="primary-menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="http://x">Link</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://x">Link</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://x">Link</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://x">Link</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://x">Link</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://x">Link</a></li>
</ul></div>                     </nav><!-- #site-navigation -->
<nav id="mobile-navigation" class="text-center" role="navigation">
<div id="mobile-menu-trigger">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-menu-1-container"><ul id="mobile-menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://x">Link</a></li>
</ul></div>                     </nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>

provide you code in running environment..?

Jasbir
– Jasbir

2018-02-16 11:25:27 +00:00
Commented Feb 16, 2018 at 11:25 — Jasbir
– Jasbir, Commented Feb 16, 2018 at 11:25

Alexander Z · Accepted Answer · 2018-02-16 12:32:53Z

1

Since you are using the bootstrap, you can add its class "navbar-fixed-top" to the menu. The example of usage you can see here

If you just need to display the already attached menu correctly on top of the rest of the content - just use CSS z-index:

.menu-wrapper {
  z-index:99999;
}

UPD: use this pattern to add classes on scrolling

edited Feb 16, 2018 at 12:32

answered Feb 16, 2018 at 12:11

Alexander Z

6045 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AAndrei Over a year ago

I added the class and the menu goes to the top over my content, but the menu has 40px top content and when i scroll i want that to be hidde. Like in the image..

Alexander Z Over a year ago

You need to add the indent to menu with css: {top:50px} (50px for example - it is the height of your content above), then, for example add the class "sticky" with JS to the content above, and add CSS "position: fixed;top:0"

AAndrei Over a year ago

I'm thinking to add margin-top: 40px (height of the content row) and to clear the margin once it's scrolled, any ideea how I can do that?

Alexander Z Over a year ago

Use this pattern to add classes on scrolling - w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

Collectives™ on Stack Overflow

Sticking bootstrap menu in wordpress

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related