Menu organization

[Zoe]

Hi,
This is a newbie question, I’m setting up the menu for my site and I’m trying to make it look similar to this one:

http://www.waterbenefitshealth.com

How can I set up sections within the menu like that site has?

Also, currently I have the menu on the left side of the home page, but it doesn’t show up on any other pages. What can I do to keep the menu on all pages?

Thanks!
Zoe

[Tom]

It’s not really possible to split up the main navigation like that in GP.

You could add a “Custom Link” to your menu with no URL added for each heading, and give that item a specific CSS class which you can style different, but that’s the only way I can think you can do this using the main menu.

Otherwise, you can look into using the “Custom Menu” widget, and then you can style it however you like.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoe]

Thanks Tom.

I tried the Custom Menu, and it didn’t keep the slide out subheadings. This is my very rough site so far: http://knowadditives.com. You can see under Sweeteners in the menu, the high fructose corn syrup page slides out as normal, but the Custom Menu below just has it shown and indented. Is there a way to keep the slide out on a Custom Menu?

If not, I also put in a Custom Link called Additives Roundup at the top. I figured out how to give it a specific CSS class, but how can I change the formatting of the Custom Link?

Zoe

[Tom]

You’ll want to keep everything in your secondary menu there, just add your headers as you did the “Additives Roundup” one.

Then you can try adding some CSS like this:

.widget-area .secondary-navigation li.subhead a,  
.widget-area .secondary-navigation li.subhead a:visited,  
.widget-area .secondary-navigation li.subhead a:hover {
    background-color: #000000;
    color: #FFFFFF;
}

With the above you can change background colors and text colors to your liking 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoe]

I got your CSS working for my secondary menu, although I was thinking that it might be easier to just have everything in the primary menu now that the custom links are working as headings. I added that to my site if you want to have a look at what I mean.

Do you know what CSS would work to format the custom links in the primary menu instead?

Thanks again 🙂

Zoe

[Tom]

The primary menu in the sidebar would use this:

.widget-area .main-navigation li.subhead a,  
.widget-area .main-navigation li.subhead a:visited,  
.widget-area .main-navigation li.subhead a:hover {
    background-color: #000000;
    color: #FFFFFF;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Zoe]

Awesome, that works. A couple last questions…

Is there a line I can add to make those custom links bold text?

And how can I center all the primary menu items, including the custom links, instead of being left justified?

[bdbrown]

Hi Zoe. See if this css answers your two last questions:

/* menu items bold */
.widget-area .main-navigation li.subhead a {
    font-weight: bold;
}

/* menu items centered */
.main-navigation ul {
    text-align: center;
}

[Zoe]

That worked perfectly 🙂

Thanks so much!

[bdbrown]

You’re welcome. Glad to help 🙂

[Author]

Posts