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!
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
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 have a horizontal menu bar with a fixed width for my site. Some of my words are too big for the widths of the buttons and they become off centered or sometimes they don't render correctly. Is there a way to make the top level buttons different sizes to fit the words correctly with the fixed width of the entire bar. This is my site if you want to check out what I mean.
http://www.rsd17.org/test
You'll see that community and quicklinks are not centered. on chrome-Linux browswer they over lap and don't look correct. Any help would be great. Im sure there is something in the CSS that can be tweaked, just not sure which.
You can remove the left / right padding on the links and instead set them to text-align: center:
ul.MenuBarHorizontal a {
padding: .66em 0;
text-align: center;
}
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).