[Resolved] GeneratePress Mega Menu

Home Forums Support GeneratePress Mega Menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1321426
    troyw

    Hi team,

    I have followed your directions as per the following link and created a Mega Menu.https://docs.generatepress.com/article/building-simple-mega-menu/

    This has worked very well, however I am having difficulty highlighting each Sub Menu Category.
    As you will see, I have been working on the menu for ‘Birds’. I have created Sub Menu Categories, under which are the various Product Categories. I want to make the ‘Sub Menus’ stand out, either a different color or a different sized font.

    In order to create a different background color to the Sub Menu, I have added the following CSS;
    .sub-heading {
    background-color: #ff9b00;
    font-size: 50px;
    color: #4f4f4f !important;
    font-weight:bolder !important;
    border-radius:10px;
    }

    I then added ‘sub-heading’ to css classes in the menu.

    As you can see though, this has colored the entire column, but I just want to change the Sub Menu / sub heading.
    How do I stop the background color being copied to the other menus and how do I adjust the font color and size, specifically of the Sub Menu?

    Thanks in advance

    #1321738
    David
    Staff
    Customer Support

    Hi there,

    if you want to style just the top level item of each sub menu then try this CSS:

    .main-navigation .main-nav > ul > li > ul > li > a {
        background-color: red;
        font-size: 16px;
    }
    #1324391
    troyw

    Hey David,
    That worked like a charm, thanks.
    My issue now is that when I hover over a main navigation Menu, the text turns Grey and I can’t see it anymore. I have tried all the color settings for the navigation and can’t seem to find how to change the hover text to white for the Main Navigation Menu we just added?

    Thanks

    #1324801
    David
    Staff
    Customer Support

    You can add specific hover colors with this CSS:

    .main-navigation .main-nav > ul > li > ul > li:hover > a {
        background-color: red !important;
        color: #fff;
    }
    #1325729
    troyw

    Just what I was looking for David.
    Cheers

    #1326073
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.