ive downloaded a bootstrap theme and tweak it a little. I added a caret and a dropdown in the top of my div but the menu dropdown was being covered by my sidebar. i want to make it in front of it, Here is the image:
Here is the code in my dropdown:
.custom-drop {
position: relative;
min-width: 105px;
z-index: 5000;
}
.frontview {
z-index: 5000;
position: relative;
}
<i class="fa fa-circle text-success"></i> Online<span class="caret"></span>
<ul class="dropdown-menu custom-drop">
<li class="frontview">Profile</li>
<li class="frontview">Sign-out</li>
</ul>
I agree with Immortal Dude suggestion. If it still doesn't work, you can also try and set your sidebar z-index to -1.
Related
I have the following, simplified:
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>
The 'a' is dynamically loaded and I cannot add a class to it. I can only add a class to the 'li'. I want to add an icon before the 'a', so that it is included as part of the clickable link.
Currently I have:
.button-1:before {
font-family: "FontAwesome";
content: "\f007";
padding-left: 14px;
}
which sets the icon perfectly above the text link. But it's not clickable. Thus, I tried...
.button-1 a:before
But this doesn't work. Nor any other variation that I can think of or find. I think I am being incredibly stupid here and missing something obvious. Any advice. Thanks
It works (i.e. clickable etc.) when you use the :before on the child, i.e. .button-1 > a:before:
.button-1 > a:before {
content: "© ";
}
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>
(As you can see, I used some other content to work around the non-available FontAwesome Icon)
ADDITION AFER COMMENTS:
You can also use :afer insteadof before. In this case you need some more settings, also for the parent, especially a relative/absolute position pairing as shown below:
.button-1 {
position: relative;
padding-left: 20px;
}
.button-1>a:after {
content: "©";
position: absolute;
left: 0px;
}
<ul class="menu">
<li class="button-1">
Link
</li>
</ul>
Hi I have a responsive Dropwdown menu:
<div class="main-nav">
<ul id="menu-horizontalnav" class="menu">
<li <a> </a> </li>
<li <a> </a> </li>
<li <a> </a> </li>
</ul>
</div>
The size of the main-nav is smaller than the size if the ul.
See the red box in the picture above. The .css parameter for the ul is
.js .main-nav .menu {
position: absolute;
z-index: 1000;
top: 30px;
width: 100%;
}
If somebody could help me get it to work that the width of the 2 elements aligns i would be very happy.
It looks width is not including the border
Add box-sizing:border-box for the element on which border is given it will fix it, which will give padding, border from inside without extending the width
I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Title
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>Option 1</a></li>
<li class="dropdown-submenu"><a>Option 1</a></li>
(various number of <li>)
</ul>
</div>
I've tried with position:absolute; top:50px but doesn't work for any case.
Thanks!
This is by default part of what Bootstrap can do. It's in the docs under Button Dropdowns - Dropup menus
<div class="btn-group dropup">
As it's absolutely positioned, you will need to have some space above the button so you can see the drop up menu, so I wouldn't use it at the top of a page.
I've set up a fiddle here for you. If you remove the <br> at the top, you'll see that the menu options are hidden at the top of the output box.
you can rotate the container, and rotate the items inside to appear normal :)
its just a few lines of css.
css:
.dropdown {
left: 40px;
top: 150px;
transform: rotate(180deg);
}
.dropdown a, .dropdown button {
transform: rotate(180deg);
}
.dropdown a {
padding: 5px 35px 5px 5px;
}
.dropdown-menu {
margin-left: -18px !important;
}
fiddle
IMO its very simple and elegant solution, the only downside you will have to use transform or 'left' with important to override Bootstrap's direct styling on the element to adjust the opened menu
I am trying to add image/Icon to bootstrap dropdown btn list options HERE
It works somehow but as you can see from the demo and following image the hover function does not reacting (highlighting)on the whole li area!
Can you please let me know how to fix this highlits all width of the li element?
Here is my code as well
CSS:
li.one {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 5px 7px;
width: 60px;
height: 25px;
}
and the HTML
<div class="btn-group">
<button class="btn span2">Select</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="one">Item 1</li>
<li class="two">Item 2</li>
<li class="three">Item 3</li>
<li class="four">Item 4</li>
<li class="five">Item 5</li>
<li class="six">Item 6</li>
<li class="divider"></li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Thanks
Using list item background as an icon is a bad idea since it makes laying on the text really tricky (as you experienced).
I'd definitely encourage you to add a new, separate element for the icons. By convention, icons are added in bootstrap in format <i class="icon-[name]"></i>. If you want custom icons, you can of course define your own classes and related CSS styles.
Here's a quick example:
HTML:
<li class="one"><i class="icon-custom-1"></i>Item 1
CSS:
.icon-custom-1 {
background-image: url("http://i1275.photobucket.com/albums/y443/Behseini/lister_zps15367983.png") !important;
background-repeat: no-repeat;
background-position: 0px 7px;
width: 60px;
height: 25px;
}
On a related note, you can wildcard all icon-* styles so you don't have to copy&paste the same stuff everywhere:
div[class*='icon-custom-'] {
/* Insert common CSS styles here */
}
Note that I'm using extra custom- to separate this custom icon formatting from icons provided natively by bootstrap.
Happy bootstrapping!
If you're simply looking to have the highlight extend to the right when hovered I would suggest removing the width: 60px; from each of your li.one, li.two etc.
Maybe add some extra margin on your li a selector as well to reduce the overlap.
Overall I would agree with jsalonen that you should look into utilizing the built-in icon code in Bootstrap.
I'm having a hard time trying to center a dropdown which is toggled by a button in a group. The group is centered correctly but the dropdown continues at the left corner.
Here is an example.
Can someone help?
Thanks in advance!
If you want to center your div.dropdown inside another div do it like so:
#dropdown1 {
width: 183px;
margin: 0 auto;
}
The drawback of it is that you need to know the exact width of the element you are centering (thats the reason I use an id as a selector; of course you need to assing it first).
See how it works on your updated fiddle.
Maybe you are looking for something like that : Live demo (jsfiddle)
.centered {
text-align: center;
}
.centered .dropdown {
display: inline-block;
min-width: 500px; /* Needs to be big enough for the menu to be centered in it */
}
.centered .dropdown.open .dropdown-menu {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
}
<div class="centered">
<div class="dropdown">
<a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
Edit completed the CSS