Bootstrap 3- make vetical navbar not pushing site content

Question

I want to create side navbar which do not interact with site content( not move content). Example bootstrap 3 navbar from one of sites:

https://bootsnipp.com/snippets/featured/side-menu-on-hover

I know that in the Internet or forum must be corespondent post but i cant find it. I ask for advice/link or example of above navbar to make it not pushing content.

If the navbar doesn't push the content, some of the content will disapear behind the navbar. Or do you want a fixed navbar like this: https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/ — eye-wonder, Aug 21 '17 at 18:57
Yes, i want hide for a while content behind sliding navbar. I dont need fixed navbar, — , Aug 21 '17 at 18:58

eye-wonder · Accepted Answer · 2017-08-21T20:22:05.153

0

If you set the navbar to the absolute top left using CSS, it will not push the content:

.navbar {position:absolute;top:0;left:0;}

If you want this to happen on desktop only, put the rule set inside a media query like this:

@media (min-width: 765px) {
    .navbar {position:absolute;top:0;left:0;}
}

If you want to show the hamburger menu (show/hide menu) on all screen sizes (also desktop), have a look at this question.

edited Aug 21 '17 at 20:22

answered Aug 21 '17 at 19:08

eye-wonder

1,181
9
17

Great! It works perfect but i need to add z-index to navbar. Thank you! – Aug 21 '17 at 19:13
Yes. If your content uses a z-index value, the navbar needs a z-index greater than the content. – eye-wonder Aug 21 '17 at 20:24

Bootstrap 3- make vetical navbar not pushing site content

1 Answers1