• Resolved Mandy Jones

    (@mandy-jones)


    Hi there,

    I have 4 lines on my main menu and I would just like custom css to do 3 basic things:

    1. Make all the individual menu items a fixed width so that the 4 menu lines align better.
    2. Change the background cover on hover. (resolved)
    3. Leave the background color active for the selected menu item.

    I searched for ‘pinnacle menu width’ and managed to figure out the answer to nr 2.
    ul#menu-main-menu li:hover { background: #dd9933;}

    However I couldn’t find answers to the other two and tried various coding but couldn’t get it to work. Can you please help.

    Website www. wildcatfamily. com

    Thank you so much!
    Mandy

Viewing 9 replies - 1 through 9 (of 9 total)
  • Kevin

    (@jx-3p)

    Hey Mandy,

    I’m having difficulty getting the menu items to display evenly. I suggest that rather than have so many items in your menu, you should instead add some to the menu as children of other menu items.

    For example, you could go to Appearance> Menus and place all of the cat lineages under one menu dropdown and add them under that parent.

    That will clean up your menu a lot.

    Does that work for you?

    -Kevin

    Thread Starter Mandy Jones

    (@mandy-jones)

    Hi Kevin, thanks for your reply.

    Each of those cat lineages will have their own set of subpages and probably two levels – I have started with the Panthera one. So I prefer not to combine them as the hierarchy will start getting too deep.

    Can I set the width of each item to a fixed width? For example the submenu items under Wild Cat Lists all seem to be the same width, regardless of the length of text. Or does that only work for a vertical menu?

    I have been trying things like: ul#menu-main-menu li:a { width: 60px;} but there is probably more I need to add, as that statement seems to have no effect.

    Regards
    Mandy

    Kevin

    (@jx-3p)

    Try adding this CSS to Theme Options> Advanced Settings and let me know if it works for you:

    .kad-primary-nav ul.sf-menu > li {
        width: 25%;
    }

    -Kevin

    Thread Starter Mandy Jones

    (@mandy-jones)

    Great thanks Kevin, that’s a lot better.
    I have shortened some of the menu labels so they don’t wrap over two lines.

    Is it possible to left align the text of the labels?
    I tried adding float: left and text-align: left but that didn’t work.

    Regarding 3. Leave the background color active for the selected menu item:
    I noticed this works on submenu items, just not on the top level item.
    Eg if I go to Panthera Lineage > Panthera Genus – Panthera Genus in the menu stays with the orange background. But if I go to just Panthera Lineage – the background reverts to white.

    Many thanks.

    Regards
    Mandy

    Kevin

    (@jx-3p)

    Go into the page edit screen for the pages that have the white menu background, and find the “Page Title and Subtitle” area.

    then find “Page Title background behind Header,” and set that to “Place behind header.”

    Does this work for you?

    -Kevin

    Thread Starter Mandy Jones

    (@mandy-jones)

    Hi Kevin, no that didnt work.

    I am talking about the individual menu item background, not the page background.

    Is there any way I can attach screen dumps to illustrate what I mean?

    Ta, Mandy

    Kevin

    (@jx-3p)

    Ah sorry, I guess I misunderstood.

    Here is some CSS to achieve that:

    #nav-main .current_page_item {
        background: #DD9933;
    }

    Let me know if that works for you!

    -Kevin

    Thread Starter Mandy Jones

    (@mandy-jones)

    Excellent that works, thanks so much Kevin.

    Regards, Mandy

    Kevin

    (@jx-3p)

    Glad it works! Feel free to post on the forums with any future questions you may have.

    -Kevin

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Menu Item – Fixed Width’ is closed to new replies.