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
Related
I want to add image/logo inside Nav Bar.
How to make sure that the nav bar height always fit the image and the other elements stay in center.
I am currently using nav bar with Nav-wrapper class from materialize framework.
I have tried to add min-height to nav-wrapper but that make the other elements slide off from the center.
Code pen link
Try like this its working for me
step-01 Im added this class navbar-brand
step-02 Im added this CSS
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 64px;
padding: 0px;
width: auto;
}
.black {
background-color: #111 !important;
}
nav
<nav>
<div class="nav-wrapper black">
<div class="container">
<img src="http://www.becomeanengagedemployee.com/wp-content/uploads/2012/03/flow-200x75.jpg">
<ul id="Nav2" class="right hide-on-med-and-down">
<li><i class="material-icons">search</i></li>
<li><i class="material-icons right">refresh</i>Link with Left Icon</li>
<li><a class="waves-effect waves-light btn">Button</a></li>
</ul>
</div>
</div>
</nav>
Codepen
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.
I'm learning HTML + CSS and working on a website where I need to have a vertical navigation bar on the left side which will have four elements which can be interacted with. Is it standard practice to wrap each of these four elements with a div or is there a more elegant or semantic way to solve this problem? I will want each element to have unique on-click functions associated with them, which is why I thought giving them divs and classes would make the most sense for interacting with them later.
Thanks!
JSFIDDLE DEMO
HTML structure:
There are many ways to achieve a vertical navigation.
The most common would be to use ul and li:
<div id="lnav_container">
<ul id="lnav">
<li class="lnav_item">Item 1</li>
<li class="lnav_item">Item 2</li>
<li class="lnav_item">Item 3</li>
<li class="lnav_item">Item 4</li>
</ul>
</div>
Also very common to have a tags inside li.
Styling:
You can get rid of the bullets by having list-style-type: none; for the ul.
You can give them different style on hover by using :hover selector to make it more interactive.
.lnav_item {
width: 74%;
margin-top: 10px;
}
.lnav_item:first-child {margin-top: 0px;}
.lnav_item.selected {width: 86%;}
.lnav_item a {
display: inline-block;
width: 100%;
line-height: 30px;
padding: 8px 5px 5px 0px;
background-color: yellow;
color: black;
font-weight: bold;
text-decoration: none;
border-radius: 2px 12px 12px 2px;
}
.lnav_item.selected a {
background-color: green;
color: white;
font-size: 18px;
}
.lnav_item:hover a {background-color: orange;}
To get rid of a underline use text-decoration: none; and override its default coloring if you wish.
Javascript (jQuery):
It'll be easy to bind clickListener to the items:
$('.lnav_item a').on('click', function() {
//$(this) item is clicked, do whatever you want
$('.lnav_item').removeClass('selected');
$(this).parent().addClass('selected');
});
EDIT:
If you want to give each of the navigation items a different style, etc, you can achieve it different ways:
jsfiddle DEMO
You can use CSS' nth-child() selector:
.lnav_item:nth-child(2):hover a{background-color: #252F1D;}
.lnav_item:nth-child(3):hover a{background-color: white;}
If you're doing it in jQuery, alternatively you can use the function with parameter (index) and maybe use eq if needed.
$('.lnav_item > a').each(function(index) {
if(index == 0) {
//give it a different onClick, CSS rule, etc
}
//and so on
});
index is zero-based, but nth-child starts from one.
The typical HTML5 markup for a site navigation menu would be a nav element that contains an ul element:
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
If you can get your CSS/JS to work with this markup (+ class attributes or whatever you need), great.
If you need more elements, add div and/or span elements: they are meaningless, so they don’t change the semantics of your document.
NAV elements are simply LISTS.
You don't need to wrap them in anything.
Here's an example of my own Navigation Panel (I also placed it on the left-hand side of my screen)
<nav>
<ul style="list-style: none">
<h3>Main Menu</h3>
<li style="font-size: 100%"><b>Article 1</b></li>
<ul style="list-style: none">
<br>
<dt>
<li style="font-size: 100%"><a href="Article 1.1">Article
1.1</a>
</li>
<br>
<li style="font-size: 100%"><a href="Article 1.2">Article
1.2</a>
</li>
<br>
</dt>
</ul>
<br>
</nav>
First of all, this is what I'm trying to accomplish:
Example http://www.n2media.com/img/header-example.jpg
I'm hoping to have this look when on a large screen but then fall back to the default Bootstrap navbar when on mobile:
Example2 http://www.n2media.com/img/header-example-mobile.jpg
I was able to get the logo enlarge by following this example.
I've also found plenty of ways to get the simple links to be centered. The one I was using was this:
.navbar.center .navbar-inner {
text-align: center;
}
.navbar.center .navbar-inner .nav {
display:inline-block;
float: none;
}
However I haven't been able to get the navbar-brand element to center between all of the simple links. Even if I do, I'm not sure how I can exclude it from the collapsing elements for small screens.
If you're happy to use Bootstrap's Responsive Utilities and just stick the logo in two places, you could show/hide the logo depending on screen size like this.
In order to horizontally center Bootstrap's nav list items, which are floated by default, you could either wrap the entire list in a relatively positioned div, or remove the floats and apply display: inline-block. In the example I've given, I've used the relatively positioned div and then cleared it at the same media breakpoint as when the mobile menu appears because I think it's a bit simpler.
CSS
#nav-wrapper {
float: left;
position: relative;
left: 50%;
}
.navbar-nav {
position: relative;
left: -50%;
}
#media (max-width: 769px){
.navbar-inverse .navbar-brand img {
height: 100%;
}
.navbar-inverse .navbar-brand {
padding: 0;
}
#nav-wrapper {
float: none;
position: static;
}
.navbar-nav {
position: static;
}
}
Simplest solution may be to duplicate your logo, once in Bootstrap's stock 'Brand' location, and once within the <li> elements of your navbar, then use .hidden-xs and .visible-xs classes to either show or hide it depending on device. Bootply seems to be down so can't show a working DEMO, but this should do it (or get close)
<div class="navbar-header">
<a class="navbar-brand visible-xs" href="#"><img src="logo.jpg" /></a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li class="hidden-xs"><img src="logo.jpg" /></li>
</ul>
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