When affixing a nav down the side of a page the content moves under the nav after initial scroll instead of staying along side, any ideas how to fix this?
Using:
data-spy="affix"
http://jsfiddle.net/cooltrooper/eJFaY/3/
Thanks
I think you generally have to specify it to an element that doesn't have the span* class.
It works better if you add it to the ul :
<ul class="well nav nav-list" data-spy="affix" data-offset-top="100">
or
<ul class="well nav nav-list affix">
I overcame this issue by adding CSS that applied to the element once the "affix" class is applied.
#your_element_id .affix {
top: (enter the pixel number where you want your element to stick);
}
Another option is to skip the data-spy'affix'. Attach the "affix" class inline.
Hopefully that provides some insight.
Related
I'm working on a Bootstrap project, the first task is to use Bootstrap navbar to build a navigation in the header. I want to use collapse functionality of Bootstrap to create a dropdown-menu div, when users hover or active a nav item, it will be visible. I want to make this dropdown-menu div 100% width of the screen.
Here's the sample code:
<ul class="nav navbar-nav">
<li class="dropdown">
<a ...>ABOUT</a>
<div class="dropdown-menu">
</li>
</ul>
The question is: the position property of dropdown-menu is absolute, which makes this div positioned based on the closest positioned ancestor. In the sample code is "li" tag, because in Bootstrap there's a rule:
.nav>li{
position: relative;
}
When I add a rule, which could make this "li" tag position static:
.navbar-nav>li {
position: inherit;
}
This rule is ignored by browser, I found this from Chrome inspect. When I uncheck the nav>li rule, my rule works. I want to know how does browser choose which of the css property value to render when it gets two rules on the same element and same property?
Thanks.
In short, specificity. The more specific the selector is, the higher priority it will be given.
For more details, look here... https://developer.mozilla.org/en/docs/Web/CSS/Specificity
Having said that, your rule appears to be wrong, as you need a dot to indicate a class...
.navbar-nav>li {
position: inherit;
}
Does anyone have a CSS solution to make the bottom-border on Bootstrap dynamic tabs stay in place when moving the tabs from left "float" to right "float"?
<ul class="nav nav-tabs">
<ul class="nav nav-tabs navbar-right">
I used the basic bootstrap tabs and only added one update to the css and the border did not disappear. Here is a fork of a useful bootply I found when working to do tabs on the right of the container:
http://www.bootply.com/4WECvfhsko
Here is the bootply with just the basic tabs floated left:
http://www.bootply.com/cjFJup6puA
Notice I added the css above the comment that floats the list-items to the right.
.nav-tabs > li {
float: right;
}
Is there a particular browser in which you are experiencing this? Have you tried another browser?
I am trying to understand angularJS and have the following fiddle written, which is a very simple message ticker.
The messages are shown by changing the CSS display attribute of one of the li elements.
<div id="ngtickerMessage" class="ngtickerMessage">
<ul >
<li ng-style="{display:setVisible($index)}" data-ng-repeat="msgObj in msgs track by $index">{{msgObj.msg}}</li>
</ul>
</div>
</div>
Is it possible to (cross-) fade the contents of the li element based on ngAnimate using the ng-style attribute ?
I used opacity instead of display in the ng-style of li and added a CSS transition to it. FIDDLE. Hope it helps.
so I am running WordPress, with a premium theme.
I wish to change the navigation bar size, and so I added
li
{
float:left;
}
a
{
display:block;
width:60px;
}
When I add this, the navigation bar changes size, and becomes as I want to. HOWEVER, also the posttitles changes layout, and becomes really ugly.
I am looking for some input
If you're targeting li elements globally, it may be affecting more than just the nav area. Try adding more specificity to your rule.
i.e. ".nav li" (.nav being whatever the class or id of your nav is) instead of just "li"
sounds like float is affecting other elements. Using clear:both should fix this.
<ul>
<li>....</li>
</ul>
<div class="clearfix"></div>
and .css
.clearfix{
clear:both;
}
I have a drop down menu on: http://whitehornguard.com/ but in at least IE7 the drop down part is appearing underneath the large header image, I have tried changing the z-index & using !important but it doesn't seem to be making any difference..
What am i doing wrong? Thanks.
This is a known issue with IE. There is a trick to workaround it.
Try wrapping the menu with additional container with the following styling:
<div id="wrapper" style="position:relative; z-index: 1000;">
<div id="menu" style="position:absolute; z-index: 999;"></div>
</div>
Please notice that the menu's z-index is less then the container.
For more details please check: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
The problem is, that IE just requires some use of position. So the z.index will just be used, if position is present. For an element, you don't want to give any positioning-rules, just try to set position:relative
You wrap your nav in a div with inline styles. Add z-index:1000; to it. It fixes the issue.