Inspiring

Answered

How to Resize Navigation Menu?

Forum|Forum|4 years ago
November 3, 2021
5 replies
2911 views

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

This topic has been closed for replies.

Correct answer sneedbreedley

@sneedbreedley you're not araound anymore ?

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

B i r n o u

Adobe Expert

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

S

sneedbreedleyAuthor

Inspiring

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

Adobe Expert

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

Nancy OShea

Adobe Expert

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.

Nancy O'Shea— Product User, Community Expert & Moderator

B i r n o u

Adobe Expert

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/

S

sneedbreedleyAuthor

Inspiring

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

B i r n o u

Adobe Expert

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;
}

S

sneedbreedleyAuthor

Inspiring

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.

Jon Fritz

Adobe Expert

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.

S

sneedbreedleyAuthor

Inspiring

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

Jon Fritz

Adobe Expert

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;
}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded