I was able to center my navbar with the CSS below. Now I want to put another element but pull that to the right. However, when I add the icon, it drops down to the next line. How do I center my navbar and add the icon, while keeping everything inline?
This is a piece of my navbar with the css.
<div class="collapse navbar-collapse" id="myNavbar" style="text-align: center;">
<ul class="nav navbar-nav">
<li >Home</li>
<li >About</li>
<li >Get Help</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-search pull-right" aria-hidden="true" style="font-size:18px; display: inline-block;"></span></li>
</ul>
</div>
CSS:
#media (min-width: 708px){
.navbar-nav{
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
}
}
One option is to add the "top" property on the element then give it a negative value to correctly position your search icon.
.search {
top: -50px;
font-size: 18px;
}
If necessary, adding additional navigation links wont't break style .
See my plunker
Also, you may take out the styles in your HTML tags.
Related
I'm working at a justified navigation bar. Some of the menu items are in two lines some have only one line. How can I manage it, that all menu items are vertically centered?
My HTML
<nav>
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
<ul class="nav nav-justified">
<li class="active">
<a href="#" >
<span class="glyphicon glyphicon-home active"></span>
</a>
</li>
<li>
<a href="rooms_prices.html" >
Rooms & Prices
</a>
</li>
<li>
<a href="location.html" >
Location
</a>
</li>
...
<li>
<a href="specials.html">
Specials & Events
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</div>
</nav>
My LESS:
nav {
margin: 0;
padding: 0;
}
.nav-justified {
width: 100%;
hight: 60px;
> li {
float: none;
alignment-adjust: middle;
> a {
display: block;
text-align: center;
}
}
THX for your hints!
EDIT:
Sorry I've messed up the code. I've left the -Tag out because there ave mor div sections with different navigation bars for several display sizes.
You have a ton of problems here, your markup is incorrect and you're trying to apply styles to elements that don't exist.
You're targeting nav, you have no nav element so you should be using .nav to target the class you've applied the div parent.
<div role="navigation"col-lg-12 hidden-xs hidden-sm hidden-md navi">
This is not valid HTML, it should be:
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
If you have nav items where the text drops down onto two lines considering your menu is justified I'd suggest that your text is too long and you should instead use some CSS3 truncation in conjunction with storing the full name of the menu item in its title attribute so it shows on hover - stretching out your other menu items is going to look strange and will require some hacking to achieve.
.nav-justified a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The issue you will have trying to vertically center a justified nav is that usually you would make the list items display: inline-block and vertically center them that way, but as justified items they are display: block by default. Additionally Bootstrap applies the border styles directly to the anchors, not the list items, so even if you vertically centered them you'd have borders out of alignment.
I have a navigation bar set up using nav-pills. I have the bar horizontal and justified, so they all line up nicely, but I want to change the width of the nav-pills so that I can make them more even with the everything else on the website. Here is my code for the navigation bar:
<div class="container" id="buttonBar">
<ul class="nav nav-pills nav-justified">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>VIDEO</li>
<li>PHOTOGRAPHY</li>
<li>ARTIST PORTFOLIOS</li>
</ul>
</div>
On a custom CSS file I made, I tried doing the following:
.nav .nav-pills .nav-justified li a {
width: 50px;
}
But to no avail. What would be the right way for me to do this? And could anyone also tell me how to change the color of both the text and the color of the nav-pill? I want to make the background color transparent.
Your CSS selector is incorrect. The space between the first three classes means that they are children, and not that the element has all three classes.
Try this instead :
.nav.nav-pill.nav-justified li a {
width: 50px;
}
If you can't get it to work, a fiddle or something would be useful.
I am not able to align the dropdown to the center of the parent on which the dropdown is opened with hover. I have tried to text-align: center for the entire .nav .navbar li elements, and it doesn't work. I have tried to set margin and left: 50% for the entire ul.dropdown-menu that is the dropdown and it doesn't work. Here is the html code:
<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
<li><div class="btn-toolbar">
<div class="btn-group">
<button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Made in the USA</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Human Grade</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">USDA Meats</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Our Story</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Campare</a></li>
</ul>
</div>
</li>
</ul>
In which class dropdown-menu, or nav navbar-nav, should I do the aligment, and what should I set?
You can use transform to avoid having to use fixed widths:
.dropdown-menu {
left: 50%;
right: auto;
text-align: center;
transform: translate(-50%, 0);
}
Answer influenced by http://css-tricks.com/centering-percentage-widthheight-elements/
You can do this as long as you're willing to give the dropdown ul a fixed width. See code below:
.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}
First 2 declarations are for visualization purposes, but the important part is the 3rd line. You'll need to define a width (in this case 200px) and then a margin-left equal to half the width. This will work with any width, no matter if the button is at the right, left or between elements (but of course you'll probably need some space for the button element)
You can see a fiddle here
The only, ugly way is to set the position depending on your needs like:
.dropdown-menu{
right: -25px !important;
}
Fiddle
But thas not the way it should be used. Keep in mind that you have to adjust the setting for all media devices.
This is what did the trick for me:
.dropdown-menu{
left: -25% !important;
}
You might need to adjust the percentage value depending on your dropdown-menu's padding etc.
On pressing the "schedule a call" button the navbar is breaking on some windows PC while using chrome browser.
http://pracly.com/experts/profile/1
The code for the navbar is as follows:
<div class="collapse navbar-collapse" id="main-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
</ul>
</div>
The code for schedule a call buttonis as follows :
<div class="external-links">
Schedule a Call
<a target="_blank" href="http://www.linkedin.com/in/faheemahmed" class="btn btn-sm btn-default">LinkedIn</a></div>
The image for this phenomenon can be seen from this link : http://imgur.com/SBpGOpF
your nav bar may be using a pixeled width(1280px) try using a percentage width.
code that works
html:-
<html>
<div class="nav"></div>
</html>
css:-
.nav{
width:100%;
height:64px;
position:fixed;
/*make sure that te div touches the top */
top:-22px;
margin-top:22px;
/*make sure that the div touches the left*/
left:-22px;
margin-left:22px;
background-color:black;
}
The basic bootstrap template here has a fixed bar at the top. I want to place a div directly underneath it.
Here's the HTML of that bar (copied straight from the page's source so there are CSS class references):
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Project name
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input type="text" placeholder="Email" class="span2">
<input type="password" placeholder="Password" class="span2">
<button class="btn" type="submit">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here's my attempt at a div to go underneath it:
<div style="background-color:#CF4342;color:#fff;top:40px;margin:0 auto;position:fixed;z-index:5000; width:50px;">Hello</div>
It almost works but the problem with this is the 'top:40px;'. When you resize the screen, the fixed bar at the top changes height.
How do I make it so that it always sits directly underneath the bar regardless of the bar's height? Bonus points for how to center it horizontally without using <center>
Edit: for the horizontal centering thing, i tried wrapping my div in a div with 100% width and then adding 'margin:0 auto' to it, but that doesn't work with fixed position
Edit2: here is the jsfiddle. line 38 of the html is my attempt, everything above that is the nav bar div.
If you're already using jQuery you could use something like this:
Working Example
Full screen example
x = (function() {
var t = $('.navbar').height();
var c = $(window).width() / 2 - $('.new').width() / 2;
$('.new').css({
top: t,
left: c
});
});
$(document).ready(x);
$(window).resize(x);
Note: updated examples with media queries to better show the effect of the script.
Of course you can do this with CSS alone, but you will need to use a media query like so:
CSS only working example
.new {
position:fixed;
margin: 0 auto;
top: 51px;
left:0;
right:0;
background-color:#CF4342;
color:#fff;
z-index:5000;
width:50px;
}
#media (max-width: 979px) {
.new {
top: 61px;
}
}
Notice that the css only solution will "break" if you narrow the screen too far. The jQuery solution won't have that problem.
Try to add this line in your css or edit the class in the bootstrap css file. Make sure your css file is under the bootstrap css file incase you choose to add it in your own. Does it make sense?
.navbar-fixed-top {
margin-bottom: 0 !important;
}
Bootstrap says the following in it's documentation:
Add .navbar-fixed-top and remember to account for the hidden area
underneath it by adding at least 40px padding to the <body>. Be sure
to add this after the core Bootstrap CSS and before the optional
responsive CSS.
So that is what i would try...
I updated your fiddle to demonstrate http://jsfiddle.net/Pevara/MgcDU/5403/
I did the following:
- Moved your 'hello inside the container with the hero unit
- Removed the positioning on the 'hello'
- Removed the 10px margin you set on the .container
- Added the following to your css, as suggested by Bootstrap
body {
padding-top: 40px;
}