dropdown menu width issue

blueshiftmusic · Member · Jul 21, 2015 at 8:03 pm
Copy link

Add topic to favorites
We are trying to extend the sub-menu of the item “Releases’ on our site
but the sub-menu width doesn’t match the no-wrapped text. Is there a way to extend the sub-menu background colour?

The CSS we are using is does the non-wrapping, which is great’ but does not extend the background. Are we missing something?

The CSS we are using is this…

/* extend sub-menu width to match text */
ul.menu ul {
width: nowrap;
}

/* disable text wrap in sub-menu */
ul.menu ul {
white-space: nowrap;
}

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 22, 2015 at 1:59 am
Copy link
Hi there, we can widen the white area for the submenus, but the length of your submenu items is going to cause issues on narrower screens such as smaller tablets and phones. If you narrow your browser window way down to where “Releases” is the last one on the right end (contact has wrapped to next line and then hover “Releases” you will see your submenu items are cut off behind the right border of your browser window. I might suggest making the menus that will have the submenus the far left and next to that so they have as much room as possible.

This will add a minimum width to the submenus, but if you end up with longer items in the submenu, it would have to be adjusted.
```
#menu li li {
    min-width: 350px;
}
```
You could also take the submenu items back to normal text instead of all caps, but that doesn’t make much of a difference really.
```
#menu li li a {
    text-transform: none;
}
```
It doesn’t look like it would be possible, but I would also consider looking the submenu items over and see if you can shorten them. Menus are much better and navigation much easier if the menu items are shorter.
blueshiftmusic · Member · Jul 22, 2015 at 2:12 am
Copy link
Thank you. That did the job for now!

I will consider altering the items so I have shorter menu items in the future.

Best,
Jordan
thesacredpath · Member · Jul 22, 2015 at 7:02 am
Copy link
Jordan, that’s awesome, and you are welcome.

No items found.