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;
Related
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
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;
}
I am trying to create a menu using CSS, but I have a problem with its actual placement.
Right now, no matter what I tried it is always on the left side of the screen and not stretched. I would like to have it in the center and possibly stretch to 100% of the screen. I tried changing the width parameter, margins, text-align, but I always got something different than I wanted or it didnt work at all.
The menu can be seen here:
http://jsfiddle.net/98tW6/10/
As I said, all I want is to have it in the center top of the page and possibly stretched so that the background image repeats all over the screen at the top with the buttons in the center.
I think the crucial lines are within this part of the code:
div#menu
but I am not sure
Remove float and add this to the <ul>:
width:100%;
text-align:center;
Then remove the float from the <li> items and make them inline-block elements, because they are inline-block now they will respond to the text-align:center of the parent, and will be centered:
display: inline-block;
fiddle:
http://jsfiddle.net/98tW6/17/
I'm trying to work on a layout and I have an issue with the navigation. If you look on the Codepen posted below and hover over the 'Home' link in the navigation, the drop-down menu will appear and it will push the other main links to the left. What is causing this and how can I fix it? I've been messing with it for a couple hours and I'm lost. Thanks for any help.
http://codepen.io/anon/pen/Cmcyr
There's no width being set on the a, ul or lis, so when the ul is displayed, the parent is expanding to the width of its widest child.
Remove the horizontal padding from the lis and set text-align: center; and give them or their parent (ul) a max-width the same size or narrower than its parent (a).
The website in question is http://oxfordbeach.com/bynight/
If you resize the browser, the nav bar will eventually go into a drop down menu for iPhone.
But when it's around 900px wide, the nav bar cannot fit the "contact" list item.
I apologize for the elementary CSS question, but I've tried:
Resizing the header to a %
Resizing the nav bar class to a %
Resizing the individual list items
However, I cannot seem to get around the fact that when the browser is around 900px, give or take a 100, the nav bar does not render properly.
Any help would be greatly appreciated!
reducing the padding on the links from 30px to 25px will do:
.sf-menu li a {
padding: 0 25px;
}
you can also set this padding to be % instead of fixed px to make the menu more responsive - I will leave the calculation to you!