I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
Related
my site Deliver .I have set the current menu color and hover colors respectively.the issue is when we scroll down the header is getting fixed at the bottom with a slight height change.so the menu colors are overlapping which i feel not good . so i tried in css
.adjustsub nav ul li {
height:40px !important;
padding 0 0 0 0 ;
}
nothing seems to be working.Please help!!!
EDIT
i need that in full height that of the header and when we scrolls down it should fit the fixed header size.reducing height doesn look good actualy
Apply this:
.adjustsub nav ul li {
height: 38px; /* decreased height */
}
The height of .menu li was the problem. Use this CSS:
nav .menu li {
height: 38px;
}
Edit
.fixed_slider header#header {
border-bottom: none;
height: 58px;
}
I know this is probably a stupid question. But say I have a navigation menu, would it be more practical to set a fixed height..
nav {
background: red;
Width: 80%;
height: 60px;
}
nav ul li {
Line-height: 60px;
}
Or to use padding to define the height?
nav {
background: red;
Width: 80%;
Padding: 30px 0;
}
I usually go with the first choice. But I'm worried that the font size might change in different computers/browsers and therefore becomes unproportional with the container. Could this actually happen?
Your vertical padding should probably go on the
nav ul li a
That way, if the anchor text scales up, so does your header and everything doesn't break out, and you have a larger clickable area. Also, don't leave the anchor display inline.
Going to be quite difficult to explain this so I've created a JS-Fiddle so you guys can see what I mean...
If you look under the 'products' tab the second link in the list I've made quite long, the result is that it overflows out the boundaries of the list. How can I make this that if a link is very long, that the width of the containing ul stretches to contain the link?
Again having a look at the JSfiddle will make things more clear in what's happening and what needs to be done.
PS - Need to get it to work without editing the HTML at all!
//Ignore this
Just remove the fixed width of your list:
ul li {
display: block;
position: relative;
float: left;
width: 140px; // <-- Remove this
height: 25px;
}
It will make your default width for your list become auto and you're done.
Demo: http://jsfiddle.net/Kpxpf/5/
Just change the width:140px; to min-width:140px; in ul li
Demo :
http://jsfiddle.net/Kpxpf/6/
You're constraining the width of your <li>s from the style on the top-level menu. This will keep your intended width: 140px; on the top-level menu and allow the sub menu to size based on its content.
jsFiddle
ul#menu li ul li {
width:auto;
}
You are setting a fixed width on the nested lists.
Change the ul li styles to:
#menu > li {
display: block;
position: relative;
float: left;
width: 140px;
height: 25px;
}
This will remove the fixed width from the nested uls allowing them to take as much space as needed.
jsFiddle
I am using a template based off of Twitter Bootstrap for a site I'm building (here's the link: rwphoto), but I am having some trouble with the mobile drop-down menu. It overlaps instead of pushing content down if I change the navbar-inner div to 194px to fit the height of the repeating image I'm using. I am just not sure exactly why this is a problem. I've looked around, but can't seem to find a solution to this.
Additionally, how would I center the .brand element (logo) in mobile, instead of having it to the left? And how would I get the nav links centered vertically, and horizontally between the logo and the right edge of the screen?
sigh... Sorry, first time using Bootstrap, obviously... :/
For Centering logo, implement this css code to the referred class...
.container { position:relative; }
.brand { text-align: center; width: 97%;}
.navbar .btn-navbar {
display: block;
position: absolute;
right: 0;
}
For Centering, the nav links,
.nav-collapse .nav > li > a {
margin: 12px 0 !important;
text-align: center;
}
And for the drop-down overlay issue, add this,
.nav-collapse { padding-top: 1em; }
I have a series of background images that need to fade in and out and appear in the background. This background image appears behind my content, is centered, and is wider than my content. I do not want this image to affect the width of my page so there is no width set on the container div, ul, or li elements. I need to determine why there is a white left margin showing up over my background image. This margin shows up no matter how wide the browser window is as shown by my "test" li. The problem appears across browsers (tested: FF, Safari, Chrome, IE8) and has nothing to do with the javascript used for the rotation and fade.
I'm sure this is something dead simple that I'm overlooking. Many MANY thanks to anyone who can point me in the right direction here.
Link to an screenshot showing the problem.
Live example of the problem.
The HTML for this is:
<div id="hdrHomeWrap">
<ul id="hdrHome">
<li class="hdrHome1"></li>
<li class="hdrHome2"></li>
<li class="test"></li>
</ul>
CSS:
#hdrHomeWrap {
margin: 0 auto;
position:relative;
top:-20px;
}
#hdrHome #hdrHome li {
margin:0;padding:0;
position:relative;
list-style:none;
}
#hdrHome li {
display: block;
height: 400px;
display:none; /* hide the items at first only */
list-style:none;
}
#hdrHome li.hdrHome1 {
background: url('images/hdr-home1.jpg') no-repeat top center;
}
#hdrHome li.hdrHome2 {
background: url('images/hdr-home2.jpg') no-repeat top center;
}
#hdrHome li.hdrHome3 {
background: url('images/hdr-home3.jpg') no-repeat top center;
}
#hdrHome li.test {
background: #F00;
}
Have you tried giving the ul (#hdrHome) a margin & padding of 0?
In your CSS, you have
#hdrHome #hdrHome li
I'm guessing that's a mistake. You are either missing a "Comma" in between.
So it should be like #hdrHome, #hdrHome li instead of the other