[Resolved] Menu organization

Home Forums Support Menu organization

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #133950
    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

    #133974
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #134189
    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

    #134211
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #134857
    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

    #134914
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #135615
    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?

    #135640
    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;
    }
    
    #136619
    Zoe

    That worked perfectly 🙂

    Thanks so much!

    #136624
    bdbrown

    You’re welcome. Glad to help 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.