Sidebar Navigation

[Sarah Lanse]

On your demos for the Umami theme, you mention this business using the theme: http://avaspizzeria.com/
I like how instead of the big navigation button, they have links to their specific pages and their menu is broken down by category instead of one full page. I looked at the theme documentation on how to do this, but it doesn’t give specific instructions.

[Bill Robbins]

Hello Sarah,

You might try the option at https://support.organizedthemes.com/forums/topic/open-navigation-menu-by-default/ and see if it’s a solution for your site.

Let me know if I can help,
Bill

[Sarah Lanse]

That helps, but I also want to set it up so the food menu has sub menus – so you can click on just Specials or just burgers, etc.

[Bill Robbins]

Those are created by adding a food group directly to the navigation menu. That will create a “page” for that group (it’s actually a dynamic archive). To do that, go to the navigation builder (Appearance > Menus in your WordPress dashboard).

Look on the left hand side for food groups. If you don’t see them there, click the screen options tab in the top right hand corner of your screen and make sure the box next to them is checked. You should then be able to add these to your navigation menu like you would a WordPress page. Update your navigation menu and that should give you navigation links to any group you’d like to.

[Sarah Lanse]

That’s what I needed! Thank you!

[Sarah Lanse]

Actually, I noticed an issue. If you go to our website, dev.jams-deli.com, and click on the food menu, when the sub-menus pop up, they get blocked by other things in the menu. Is there something I can do about that?

[Bill Robbins]

It is possible to adjust the positioning of the sub-menus in the navigation. In your Custom CSS, find this section:

ul#primary-menu li:hover ul {
	display: block;
	position: absolute;
	left: 200px;
	top: 0;
	width: 180px;
	background-color: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

Change it to be like this:

ul#primary-menu li:hover ul {
	display: block;
	position: absolute;
	left: 200px;
	top: 0;
	width: 180px;
	background-color: rgba(0, 0, 0, 0.8);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	z-index: 20;
}

and that should cause the sub-menus to appear “above” the regular ones at the point where they overlap.

If you need to adjust the horizontal positioning, you can change the left: 200px; in the snippet above. If you make it larger, the sub-menus will be further from the left; smaller will be closer.

If you move them further from the left be sure to test them as they may become more difficult to click on the further they are from there.

Bill

[Sarah Lanse]

Perfect! Thank you!

[Bill Robbins]

Anytime 🙂

[Author]

Posts