Bootstrap Navbar Fixed Top overlaying the slider Carousel

Asked

Viewed 3,201 times

0

I’m making a Fixed top navbar menu and I want this menu to accompany the scroll when you slide the page, but the navbar is overlapping the section just below that is the slider. I wanted to know how to leave it in position without overlapping the slider as well as slide along with the scroll.

O jsfiddle https://jsfiddle.net/fhvo7anz/

  • The sure thing is that all Fixed navbar really stay at the top of the page and above all elements, but you can overlay the navbar with the carousel itself. You can set property of position: absolute; and maybe even a z-index.

  • But what I want is, for example: that the menu is in the select position, without overlapping the carousel and vice versa and when we slide the page this same menu follow the sliding being at the top.

1 answer

3


Dude, to use Navbar-Fixed-Top we need to assign a value of padding pro element body, because Navbar in CSS is like "position: Fixed", and with this attribute, it has no influence on the other elements of the screen, ie, will not "push" down the content.

Just add that to the CSS

/*Para dispositivos com width menor que 768px*/
body {
  padding-top: 290px;
}

/*Para dispositivos com width maior ou igual a 768px*/
@media (min-width: 768px) {
 body {
     padding-top: 220px;
  }
}

Look how it turned out: https://jsfiddle.net/fhvo7anz/5/

  • but when applied in different resolutions (making that little game of increasing and decreasing the browser) the "fixed" difference remains. How do we change this? for example, make a withdrawal on this site > http://shapebootstrap.net/demo/html/multi/ increasing and decreasing the slider keeps "glued" to the menu.

  • So, more or less, right... If you pay attention, when leaving in a medium size, a part of the slider is behind the menu. But you can tidy up. Just take the values that Bootstrap changes the responsive layout and include with the sizes that each resolution leaves the navbar. See: https://jsfiddle.net/fhvo7anz/5/

  • Really, I was fixing it. Thanks for the help.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.