Menu and submenu widths

Backlight Customization
#1

Hello. Backlight 3 is great. I have two questions regarding the width of horizontal menus and submenus:

(1) Is there a way to increase the amount of horizontal space between menu items in a top pallet horizontal menu? Equivalently, is there way to increase the width of the entire horizontal top pallet menu?

(2) Is there a way to increase the width of submenus? Some of my submenu names do not fit within the default width of a dropdown menu.

Thanks for any help you can provide.

#2

All of that can be done with custom css.
I think I wrote something in the old forum about controlling the width of the sub menus. I’ll try to find it.

#3

This will only affect the Horizontal menu
Here is what I’m using on one of my sites to change the sub-menu width:

.nav.nav_h ul.primary-menu ul.sub-menu {
		width: 300px;
}

that will affect all sub-menus you may have.

If you only want to target a specific menu, use a -child psuedo selector:

.nav.nav_h ul.primary-menu li:nth-child(2) ul.sub-menu  {
		width: 550px;
	}

see this site for an example. The Workshops and Tours sub-menu is wider to accommodate the longest title.

#4

To increase the space between menu items, adjust the left and/or right padding using the nav.nav_h li selector.
This will add left and right padding to each menu item:

nav.nav_h li {
		
		padding-left: 12px;
		padding-right: 12px;
	}
#5

I would take a different approach, and instead take a hard look at your titles. Menus should be concise, and easy to parse. If you have too many menu items, or if your titles are overflowing the allotted space, then I think you should take that as an opportunity to tighten things up.

Personally, when I feel overwhelmed by a site’s navigation, my first instinct is to click nothing, and leave.

1 Like
#7

Rod,

Thanks so much for all three of your replies. This is all really very helpful. Thanks for taking the time to explain.

Best,
Walter

#8

Matt,

That is a very good suggestion. I hit upon a way to shorten the titles so they fit. (Still, I’m glad to know Rod’s technical solution, in case I need that down the road.)

Best,
Walter