Bootstrap 3.0 affix with list changes width
I had the same problem and fixed with this:
$(window).resize(function () {
$('#category-nav.affix').width($('#content').width());
});
basically in an event of resize I calculate the content div's width and set the width of affixed element to that.
Twitter bootstrap 3: Navbar changes width when affix fires
You can't solve that. The problem is the position: fixed;
. The Navbar will be rendered by the browser without left
or right
property.
You can only solve the issue with three things:
1. Use absolute positioning.
Use position: absolute;
and change the top
value on scrolling with jQuery. disadvantage: You need a Javascript-part for that.
2. set left/right
Set a left: ?px;
or right: ?px
3. define a special width
Set a min-width: ?px;
and/or max-width: ?px;
for each media-query
Bootstrap Affix Changing List Item Width
After some research, I've figured out what the issue is.
Before the affix kicks in, the width is inherited from the 'span3' div with parents my affixed nav.
After affix kicks in, that affixed nav is removed from that parent which is why it's losing it's width. The affix plugin basically rips it out of the DOM and places the affixed element manually on top.
The solution is to manually give the .affix class a width. In my case, I've given it a width that simulates a span3 parent.
.affix {
position: fixed;
top: 20px;
width: 190px;
}
span3 is 220px width, with 15px padding on both left and right. So my putting the above CSS has worked.
If you have multiple affixes, you'd have to properly select and apply the different widths.
Twitter Bootstrap affix element width rolling out from parent element borders
As stated in the docs..
"you must provide CSS for the positioning and width of your affixed
content"
Of course, it all depends on what you think "look nice". Here's an example forked from you Bootstrap. Notice the #myAffix.affix
CSS used to control the position of your panel.
http://bootply.com/RUiDxG0OqI
Bootstrap 3 affix with grid columns
It's a z-index problem
Just add this css--
.affix {
z-index:100;
}
Working Example
<!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> .affix { top: 0; width: 100%; z-index:100; }
.affix + .container-fluid { padding-top: 70px; } h1 { color:darkred } </style></head><body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Bootstrap Affix Example</h1></div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Basic Topnav</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul></nav>
<div class="container"><div class="row"><div class="col-md-12"> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1></div></div></div>
</body></html>
Bootstrap contents moves over affix
Just add z-index: 10;
to your affix-css like i did here:
.affix {
top: 0;
width: 100%;
z-index: 10;
}
this should solve your problem :)
Working solution: https://jsfiddle.net/707n3r21/3/
if you want to learn more about z-index you should take a look at this
documentation: http://www.w3schools.com/cssref/pr_pos_z-index.asp
// EDIT :
To solve your other problem change the width of your affix-css to 66.66666667%
. Thats the same width like the width of col-lg-8 (bootsrap.css)
.affix {
top: 0;
width: 66.66666667%;
z-index: 10;
}
Working solution: https://jsfiddle.net/707n3r21/4/
// EDIT:
For smaller screens add this to your css:
@media (max-width: 1199px) {
.affix {
width: 100% !important;
}
}
Now we should have fixed it all:
https://jsfiddle.net/707n3r21/10/
Related Topics
Why Do I Have to Add "Overflow:Hidden" to Make The Navigation Bar Visible on The Page
Lato' Font Rendering Odd in Safari, Not in Chrome, or Firefox
How to Set Margins 0 on Print Preview
Keeping CSS Out of Js in Angular 2/Angular-Cli
Regression Testing for Styling and Layout of Web Applications
Validating Check Boxes in HTML
CSS-Redundancy When Using Less and Its @Import
How to Apply a CSS Rule to All Descendants of an Elements
CSS: Series of Floated Elements Without Wrapping But Rather Scrolling Horizontally
Site 5X Faster via Mod_Rewrite, But CSS Images Are Broken
CSS Stylesheets at Top or Bottom? or How to Solve Blank Page Issue
Target The 2Nd Instance of a CSS Class
How to Customize Angular Material's Input/Md-Input-Container Component