Usually navbar elements such as the menu link are placed where you want them in your html file. But for certain reasons I need to do this in my css file.
Is there any way for example to change the alignment of my navbar-menu links from left to right? By the way: Margin-left: xx px; does not help here because it destroys the responive behaviour of bootstrap.
Thanks a lot!
Try float: right; property to your navbar-menu links I think it should work.
or USE
.pull-right or .pull-left class of bootstrap.
<ul class="navbar-nav pull-right">
</ul>
<ul class="navbar-nav pull-left">
</ul>
Related
Im using bootstrap 3.3.7 in my test project. This is the production link:
http://colorfill.ionic.host/test/
As you will notice in the top right corner there is a LANG dropdown menu. While hovering it display somehow the content but it looks like the z-index was to small. Increasing it - change nothing.
I'm using following code:
<ul class="social pull-right">
<li class="dropdown">
LANG:
<ul class="dropdown-menu zom">
<li>POL</li>
<li>ENG</li>
<li>UA</li>
</ul><!-- /.dropdown-menu -->
</li>
<li><i class="icon-s-facebook"></i></li>
</ul>
what is wrong then? should I write my own .dropdown class? I dont want to destroy current nav menu..
Increase the z-index of .navbar-header to 1, currently its 0. Like:
.navbar-header {
z-index: 1;
}
You need to increase the z-index of the parent element, no matter what
your child z-index is, If your parent's z-index is lower than child's
it will not work.
Hope this helps!
add this css code to custom.css in line9:
.navbar-header {
z-index: 1;
}
add style for parent div that have navbar-header class as
<div class="navbar-header" style=" z-index: 1;">
Add to .navbar-header z-index: 1;
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'm trying to build a menu with CSS. When the li element has a class of active, I want a triangle (of a specific size) to appear next to the container. Please see the following http://jsfiddle.net/hcabnettek/MeczJ/
As I increase the left property, the arrow goes to the end of the container, but slides behind it. I tried z-index and various other things but I can't seem to figure it out.
Any help would really be appreciated. Thanks all!
<nav>
<ul class="nav main-nav">
<li class="active">
<a href="/home">
<i class="icon-home"></i>
<h6>Home</h6>
<div class="items"></div>
</a>
</li>
</ul>
</nav>
Make the li set to overflow: visible. This should probably fix the problem. If not, also check that the ul, which has a set width, is also set to overflow: visible.
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.
I try to use bootstrap affix (2.1.0) in one of my mvc4 project.
It seems that .span3 and .span9 doesn't work properly if, after scrolling 50px, the .span9 content move to the left.
I found this: Text moves to side of the page on scroll down but is not working. Adding floats to spans works somehow but is not "responsive". I think it must be a better solution.
Does anybody make it work ?
Here is my code (copy & paste from bootstrap site). Where I did wrong ?
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container">
....
<div class="row">
<div class="span3 bs-docs-sidebar" data-spy="affix" data-offset-top="50">
<ul class="nav nav-list bs-docs-sidenav">
<li><i class="icon-chevron-right"></i> Download</li>
....
<li><i class="icon-chevron-right"></i> What next?</li>
</ul>
</div>
<div class="span9">
....
<section id="download-bootstrap">
Problem solved. Once I affixed the unordered list, everything working fine. Somehow I understood that I have to affix the parent div, not the list itself. My mistake.
another way to fix this is to set the nav span min-height
.span3 {
min-height: 1px;
}
also I needed to set the nav to not affix when in tablet mode:
#media (max-width: 767px) {
.sidenav.affix {
position: static;
There really isn't enough in the docs at the moment explaining how to get this to work.