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;
}
Related
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.
I have a drop down menu in a nav-bar. Below it (below the nav-bar) there is a div whose position is fixed. When I open the drop down menu it goes behind that div. I already tried z-index but it's not working. I also made the position of the dropdown menu "fixed" but it did not show any thing.
Below is my code:
.dropdownmenu{
background-color : #333;
opacity : 0.95;
z-index : 9999;
}
and html code of navbar in which drop down menu is:
<li class="dropdown">
<a href="#" class="dropdown-toggle" id="drop" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<strong>
<%= session['user-session']%>
</strong>
<span class="caret"></span>
</a>
<ul class="dropdown-menu drop">
<li>My Posts</li>
<li>Settings</li>
<li class="divider"></li>
<li><%= link_to "Logout","/users/logout"%></li>
</ul>
</li>
js code is:
$(document).scroll(function ()
{
var scroll = $(this).scrollTop();
var topDist = $("#navbar").position();
if (scroll > topDist.top) {
$('.navbar').css({"position":"fixed","width":"100%","z-index":"1"});
if($('#search').css("position") == "fixed"){
$('#search').css({"position":"fixed" , "marginTop":"80px"});}
}
else if (scroll == topDist.top) {
$('.navbar').css({"position":"fixed","width":"100%","z-index":"1"});
if($('#search').css("position") == "fixed"){
$('#search').css({"position":"fixed" , "marginTop":"0px"});
$('.navbar').css({"position":"static","top":"auto"});}
}
else {
$('.navbar').css({"position":"static","top":"auto"});
}
});
id #search is the id of below div
here is the code of search div which is fixed. menu hides behind it.
<div class="col-sm-4" id="searchDiv">
<div class="panel panel-default serachpanel" id="search" style="height:83%;position: fixed; overflow-y: scroll;z-index: -1;">
<div class="panel-heading">Search Persons</div>
<div class="panel-body">
<div class="form-group">
<p>To optimize your search rresults,provide picture of </p>
<p>person with a clear face to do search by picture.</p>
<div class="row">
<div class="col-md-1">
<div id="image-holder"></div>
</div>
</div>
<input id="fileUpload" type="file" class="btn-success"/>
</div>
<div class="row">
<div class="col-md-12">
<label>Enter Date and Time You want to search from:</label>
<input type="datetime-local" class="form-control" />
</div>
</div>
............
Without the actual code its really hard to tell what seems to be the problem. From the CSS you posted, I can see you've added z-index property to an element which is not positioned, or rather has a static position. z-index only works on positioned elements (that is, ones with any position other than static) and their descendants.
The z-index property specifies the z-order of a positioned element and
its descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
For a positioned box (that is, one with any position other than
static), the z-index property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a local stacking context.
See: https://developer.mozilla.org/en/docs/Web/CSS/z-index
You could try to add position: relative to your selector. It might not work in your case, but as I said, without some actual code, my guess is good as any.
.dropdownmenu {
position: relative;
background-color: #333;
opacity: 0.95;
z-index: 9999;
}
Take a look at the Bootstrap Components page to make sure you are using the correct markup. Markup for dropdowns inside of navbars is as follows:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
Hopefully this helps.
EDIT:
In your JS code, "z-index":"1" will set your z-index to 1, change these values and see if that helps.
EDIT 2:
Everything contained in <div class="panel panel-default serachpanel" id="search" style="height:83%;position: fixed; overflow-y: scroll;z-index: -1;"> should be at z-index: -1; this leads me to believe that its likely the <div class="col-sm-4" id="searchDiv"> div causing this issue. For an easier testing paradigm I would suggest using the Inspect Element editor in Google Chrome, you should test each one of the CSS modifiers for that element (and all the subsequent elements). Let me know if that doesn't work.
As a side note: serachpanel in the above code should be searchpanel, is that intentional or a typo?
Struggling a bit with some CSS navbar layouts and positioning the logo in the right hand side of the navbar.
Fiddle.
<div class="container-fluid">
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand pull-right" href="#">
<img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2010/05/BP-Redesign-Contest-4-75x75.jpg" alt="Alternate Text for Image" >
</a>
<div class="navbar-offcanvas offcanvas navmenu-fixed-left">
<a class="navmenu-brand" href="#">eServices</a>
<ul class="nav nav-justified">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>
</div>
</div>
Notice that the logo is positioned improperly.
When you hover over Menu 4, the effect is that the logo gets covered with the hover effect.
What I want to accomplish is something similar to this:
Notice that the logo is outside the navigation menu item, so that when I hover over the menu, the logo doesn't get covered.
Also, I need the logo to be positioned, right beside the collapsed navigation bar (as shown below) when the page is being viewed in mobile devices.
What proper css (or html tags) do I need to set to get this? Totally struggling with this for quite some time already.
Thanks.
Update: The fiddle must be viewed on Chrome (not sure why FF does not justify the nav items).
I think that I got the effect that you were going for. http://jsfiddle.net/0g9w8zza/4/. The following was added:
.nav {
padding-right: 75px;
}
.navbar-toggle {
position: absolute;
right: 75px;
top: 0;
}
Two things were added:
The hover state problem was happening because the menu technically extended all the way to the right side. Adding padding-right gives the logo white space in which to live (with your existing position: absolute; right: 0.).
The .navbar-toggle was also there, but hidden behind the image. position: absolute; right: 75px; puts it in the right place.
Note: Both classes assume your logo will always be 75 pixels. Alternate scenarios:
If you are using a CSS Pre-Processor like Less or Sass, use a variable here to make changes easier.
If you are using a fluid logo width, you can use percentages. I demonstrate this here: http://jsfiddle.net/0g9w8zza/6/. (In the Fiddle, logo width is 20%, and it still works; scale the Run window up and down to check).
(Let me know if this doesn't address your question, and I'd be happy to revisit).
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.
I have two elements that are fairly unrelated, the .menu, and the .content_selection_button. The only thing that ties them together is that they are both inside <li> elements in the same <ul>, other than that they share nothing. Yet, for some reason when I change the font-size of a .content_selection_button it affects the vertical placement of the menu. I had a similar problem here. Why is font-size ruining my placement, and how can I stop it?
JSFIDDLE
Font Size 10
Font Size 25
Menu CSS
.menu {
display: inline-block;
background-color:lightblue;
margin: 1px;
padding: 2px;
box-sizing: border-box;
border-radius:5px;
}
Content Selection Button CSS
.content_selection_button{
font-size: 10px;
box-sizing: border-box;
border-radius:5px;
}
HTML
<ul class="t_inject_container">
<li class="t_inject_row">
<ul class="menu">
<li id="LI_4">
<button class="add_button t_intect_button">
+
</button>
</li>
<li>
<button class="minimize_button t_intect_button">
m
</button>
</li>
</ul>
</li>
<li>
<ul class="content_selection_container">
<li>
<form name="search_form" class="search_form">
<input type="text" name="search_input" class="search_bar" />
<input type="submit" value="🔍" class="search_button" name="search_button" />
</form>
</li>
<li id="LI_14">
<button class="content_selection_button">
My Timeline
</button>
</li>
<li>
<button class="content_selection_button">
relevent
</button>
</li>
<li>
<button class="content_selection_button">
mentions
</button>
</li>
</ul>
</li>
</ul>
I hinted that playing with bottom vertical alignment of the inline-block elements could fix the alignment issues. This could be avoided by simplyfing the UI by reworking the mark-up and CSS.
[ELEMENT] {
vertical-align: text-bottom;
}
You've main parent element's with height 150px with LI inside 25% height. so that comes around 37.5px. The height wont increase due to the increase in font size, but it will affect the calculated line height, the line-height will increase pushing the text below a central axis of the button.