Bootstrap sticky nav and grid issues -
I am using bootstrap for the overall site, but with a margin of 12 in a 12 column grid, Edge ' There is a secondary sticky NAV to work in page linking (with APIs), but the point is that when the NAV decides, it is removed from 12 columns (Z-index 99 99) and leaves buffer Any ideas how focused and 'back to the grid' will be appreciated!
HTML
& lt; Div id = "strip" class = "strip" & gt; & Lt; Div id = "navstrip" & gt; & Lt; Ul class = "navstrip navbar-nav2" & gt; & Lt; Li & gt; & Lt; A href = "# content1" & gt; Link 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# content2" & gt; Link 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# content3" & gt; Link 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# content4" & gt; Link 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt ;! - / navstrip - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - /.col-lg-12 - & gt; & Lt; / Div & gt; & Lt ;! - /.row - & gt;
css
body {padding-top: 50px; Font-family: 'lats', non-serif; Background: #BFBFBF; } .col-lg-12 {width: 84%; Margin-left: 8%; Margin-right: 8%; } #NastStripbase {Width: 100%; Background color: #fff; Height: 45px; Padding-top: 5px; } #stumps {top: 56px; Width: 65%; Margin-left: auto; Margin-right: auto; } #navstrip {background-color: # 626767; Text align: center; } #napertrip al {margin: 0; Padding: 0; } #NestStrip Lee {margin-left: 0; Margin-right: 0; Display: Inline; } #navstrip ul li a {color: #ddd; Font-weight: 400; Font-size: 15px; Text-decoration: None; Line-height: 40px; Padding: 0 20px; }
. Navbar-fixed-top and Navbar sets the fixed-bottom status to determine your element.
You can set the elements, except for the top, right, bottom, something, the situation is relative to their parents, the parental status may not be static.
You probably have to sleep like this:
html
& lt; Div class = "row" & gt; & Lt; Div class = "col-lg-12" & gt; & Lt; Div id = "strip" square = "strip" & gt; & Lt; Div id = "navstrip" & gt; & Lt; Ul class = "navstrip navbar-nav2" & gt; & Lt; Li & gt; & Lt; A href = "# content1" & gt; Link 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# content2" & gt; Link 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# content3" & gt; Link 3 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# content4" & gt; Link 4 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt ;! - / navstrip - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - /.row - & gt;
css
.strip {status: relative; } #navstrip {status: fixed; Top: 0; Left: 0; }
Comments
Post a Comment