I am working on the following website: www.hantempcontrols.com. I have noticed minor browser-to-browser changes in alignment and font appearance and whatnot, which is to be expected. However, I am having trouble figuring out the CSS to make the navigation look how I want.
On several other people’s computers, it looks like this:
On my computer, all of the text (including the site title and the pages) appears on one line across the header.
I would prefer it to be all on one line so it doesn’t eat into the top part of the body of the site. If anyone knows CSS to either 1) put the title of the site centered on top of the centered navigation line, or 2) style it so that regardless of the browser zoom, the navigation always appears on a single line.
It seems the logo and menu are too wide to fit without wrapping just before the media query switch to the hamburger. You could try adjusting the media query to switch to hamburger before the logo and nav wraps.
Another solution woiuld be to decrease the width the menu needs, e.g. change the link padding a few px.
Or maybe a better solution is to make the menu fit dynamicly. Try this and see what you prefer:
– Apply white-space:nowrap; on the nav container.
– Then to fit the menu adjacent the logo, display the nav list as table and give it 100% width, keep its max-width and float as is. (The nav and the logo are still cells in the nav container table.)
– Have the items display as table-cell and set the width to 1%. (The 1% makes the cells share available extra table width equally after getting the width each item’s content need.)
– Then on the links; remove the horizontal padding and apply text-align center instead.
If you want the logo centred when the hamburger is active, you could try apply text-align center to the container.
That’s not good for UX on a mobile, as the smaller text will be harder to read and the overall reduction of the tappable area from reducing font and padding will make things difficult for fat fingers.
