I want to make my navigation fill the space of the header vertically. I've tried 100% height with no luck.
If you see here on the development site: http://inspiredworx-labs.com/sites/mannings/ the homepage menu item has a red background that does not stretch/fill the full height of the header.
How can I achieve it, so that all menu items fill the height, even if the height changes?
Thanks
The only way I know to achieve this is a bit tricky but very solid.
Here is a nice and clear explanation :
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
You need to increase padding as below. So, it will look as you need the updates.
#masthead .nav ul li a{
padding: 19px 15px;
}
Related
I'm having an issue with a menu on a responsive site and wondered if anyone could advise.
If the screen width is at a size where some menu items are on two lines and others one, the black menu dividers don't go all the way to the bottom.
100% height doesn't appear to work I've tried adding...
ul {display:table}
li {display:table-cell}
https://jsfiddle.net/k_2_j/obzj8f8m/4/
100% height just doesn't seem to work.
You could try
display: inline-block;
I am trying to get the child(LI) to fill the parent(UL) in my main menu here website-test-lab.com/sites/mirandaparsons/
I am using parts of flexbox to make the menu vertically and horizontally centered but you will notice that I need the white borders to be full height of the menu.
I've seen a lot of 'hacks' to get this to work but surely there is an easier way? Perhaps with flexbox or even a JS snippet?
Any help would be most appreciated.
For example:
Give the ul: height: 60px;
Remover margins from li
Give li a: padding: 20px 0.5em;
Result:
http://i.stack.imgur.com/eYdPc.png
Very simple question... may sound silly, but I've been struggling to do this for an hour.
How do I LOWER the main navigation links (HOME, ABOUT, GALLERY, etc) on this page:
http://bellairecabinets.com/new/
Thanks in advance!
Firebug addon shows that main navigation menu (#menu-main-nav) has a property margin-top. You can just increase the margin to lower the navigation links.
A very sound long term advice for you will be to grab excellent tools like Firebug, MeasureIt, experiment and learn about CSS properties with them.
You can increase the top margin of the <ul>
margin-top:50px;
You can increase the top padding of the <ul>
padding-top:50px;
If it didn't work, try to increase the top padding of the items inside the <ul>
try this
#menu-main-nav li strong
{ line-height: 35px;
height: 40px !important;
}
<ul>
<li>Brantford Grandview</li>
<li>Brantford Vintage</li>
<li>Kingston <br/>River Park</li>
<li>Paris</li>
</ul>
It's a pretty basically drop down menu Im building. Right now, I'm just adding a top border to every li giving it a grey line. However, what I want is a 1or 2px gap between the links so the user can see the bg behind. I tried add a div tab in between the li with a height of 1px, but it does not work.
Thanks
A padding inside the li would work.
li{
padding-top:2px;
}
would leave a 2px space inside the li and show the background.
It's hard to tell without seeing the CSS, but I would try fooling around with margin-top or something. It mainly depends on what element the background is being applied to, in your case you would need to apply it to the <li>. Let me know if I need to elaborate.
Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.
If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.
I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.
Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.
Thanks!
It is because of <a></a> present in <li id="gn-support"><a></a></li>
That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.
#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}
You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.
Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:
globalnav {
margin:0;
padding:0;
width:1000px;
}
Ok the problem has to do with you fixed width on:
#globalheader{
width: 769px; //this is too small and actually not needed.
}
The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.
Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.
Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.
If you change the width of globalheader will work.
#globalheader {
height:37px;
margin:auto;
position:relative;
width:515px;
z-index:1;
}
If you want to add more navigation links later you will have to increase the width of globalheader.