How to Resize Navigation Menu?

[sneedbreedley]

I created a drop-down menu. It was perfect until I added one more menu item. Now the last item jumps to a 2nd. row. How can I resize the menu so it fits on one row AND it also has to shrink when viewed on a tablet to fit on one row!

www.winvoices.com

[Jon Fritz]

Actually, on any screen size above 920 px, it starts dropping menu items to that second line with as many as 5 buttons. As the viewport width increases, they all jump back up except the last one.

If you increase the max-width setting you have on your gridContainer a bit, that last link will jump up to the first line when the window is open wide enough by the viewer.

Looks like 1362 px will do it.

[sneedbreedley]

In my code, I don't see an option for max-width.

[Jon Fritz]

It's in your fluid-index.css file, in one of your competing media queries, line 86...

@media only screen and (min-width: 769px) {
.gridContainer {
width: 88%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}

[sneedbreedley]

I increased the max-width from 1232px to 1362px. and it made no difference. Then I tried 1432px and it worked, but when viewed on a tablet, the last 4 menu items still jump to a 2nd row. Is there a way to shrink the font size when it detects a smaller screen? BTW, thanks so much for all your help!

[B i r n o u]

to add at what Jon said, the problem will often happen, it's a first architecture question... how to distinguish categorie, menu, sub menu... and so on...

the best way is to set a card sorting going bottom to top... but anyway, here you are, and you face this problem...

so you can act on the font size... from 16px to 12px... in the rule .navWrapper li a

.navWrapper li a {
    /* other properties */
    font-size: 12px;
}

[sneedbreedley]

I changed the font-size from 15px to 12pix. That worked on my desktop, but on my tablet, the last 2 menu items still jumped to a 2nd. row.

[B i r n o u]

a horizontal menu will always have a width limit and, of course, will have to be spread over two, even three, rows, depending on the number of items composing it...
that's why, in order to be usable in an ergonomic way on any type of device, there is the hamburger menu... would say burger king

https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/

[sneedbreedley]

The problem is when a 2nd row appears, the upper submenus are blocked by the 2nd row.

[B i r n o u]

with an hamburger menu, you wont have trouble with any submenu. did you have a read on the link I send ?

this one is more visual

https://www.mockplus.com/blog/post/hamburger-menu-examples

[Nancy OShea]

Your Navigation contains too many elements to fit on one row. 

The workaround is to collapse menu on ALL devices or reduce the number & size of links on smaller devices.  See screenshots.

[B i r n o u]

yes you're right, I agree, that was my point... architecture of information, and hamburger menu

[sneedbreedley]

So I eliminated one menu item and I changed the longest menu item to be double spaced. But now the single spaced menu items don't fit height-wise!

www.winvoices.com

[B i r n o u]

add to your UL definition in .navWrapper ul

.navWrapper ul {

    overflow:hidden;
}

and add padding and margin... to your  A definition in .navWrapper li a rule

.navWrapper li a {

    padding-bottom: 100px;
    margin-bottom: -90px;
}

 that should do the trick

[sneedbreedley]

That didn't work because all my submenus disappeared!

[B i r n o u]

ah yess the submenu are involved in the main menu, and so the overflow cut them... I see

[B i r n o u]

so for removing the overflow, that mean that the bottom margin, an the padding bottom, must reflect the height of the main menu (UL) but I don't like it

sorry; I have to go tonight, it's 11PM here... I should be back to the office tomorow morning, if no one helped you, I will think about it by then

[B i r n o u]

well as I see that you have no tracks during night, here is a way that you could try...

so different points...

 1 - first you have to change the display mode of your menu item...

.navWrapper li {
	/* float: left; */
	display: table-cell;
}

2 - the problem is now all your submenu react the same so you have to fileter them by creating a new rule

.navwrapper .submenu li {
    display: initial;
}

3 - as your background main menu doesn't fit, you have to remove properties background(s) and border form the A tag

.navWrapper li a {
	/* border-right: 1px solid #000; */

	/* background-image: url("https://www.winvoices.com/menu-06_files/css3menu1/mainbk.png"); */
	/* background-repeat: repeat; */
	/* background-position: 0 200px; */
}

4 - finaly, you can add them to a new specific rules targeting the main menu items only

.navWrapper .navMenu > ul > li {
	border-right: 1px solid #000;
	background-image: url("https://www.winvoices.com/menu-06_files/css3menu1/mainbk.png");
	background-repeat: repeat;
	background-position: 0 200px;
}

5 - and you will have to handle the submenu items background as you like, by affecting the existing submenu rule

.subMenu li {

}

give it a try and let me know

[B i r n o u]

if that works, you will probably have to clean some properties that fits around for no way ...

[sneedbreedley]

I really appreciate all your help but I know my limitations. This is too complex for me to apply to my site.

[B i r n o u]

in case, just send me your CSS file (navigation.css)

[osgood_]

in case, just send me your CSS file (navigation.css)

By @B i r n o u

I think possibly it's a dead project, the OP has reverted to their original layout where the navigation breaks before the hamburger break-point. Once there are too many main navigation items its best to expore other potential ways to solve the issue.

[Nancy OShea]

Agreed.  And there's a huge amount of dead space on the page that could be put to better use with a modern layout approach. 

[B i r n o u]

@sneedbreedley you're not araound anymore ?

[sneedbreedley · Accepted solution]

Yes, I devised a workaround by creating a filler space before the first submenus for the first 2 cars.