[Resolved] Make one drop down look different on GP menu

Home Forums Support [Resolved] Make one drop down look different on GP menu

Home Forums Support Make one drop down look different on GP menu

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2319230
    William

    Hi there,

    I am trying to put emphasis on one item in the menu, along with only its corresponding drop-down items. I would like it to look like the blue button you can see here. Instead, it is currently defaulting to just a grey box.

    Is there a way to achieve this?

    Kind regards,

    Will

    #2319315
    Leo
    Staff
    Customer Support

    Hi Will,

    You can try using a similar method introduced here:
    https://docs.generatepress.com/article/adding-buttons-navigation/

    Let me know if this helps ๐Ÿ™‚

    #2319851
    William

    Hello Leo,

    Thank you for that – this seems to work, but I want the button to have a drop down of options too. Based on that, is it still the best option?

    Kind regards,

    Will

    #2319896
    David
    Staff
    Customer Support

    Hi Will,

    yes, that method is the best method if you want to have drop down ( sub-menus ) menus too.
    Do you need assistance with styling the specific drop down menu ?

    #2319979
    William

    I am not sure how to add the drop down, with a hook to what location?

    The other issue is that the items in the dropdown will change depending if logged in or not:

    – Logged out will show ‘Log in’ and ‘Sign Up’ nav items
    – Logged in will show ‘Account’ and ‘Log out’ nav items

    I currently have that, just it is in the menu – would it be best to try and style just those parts of the menu or the way you’ve suggested better?

    Many thanks,

    Will

    #2320058
    David
    Staff
    Customer Support

    I am not sure how to add the drop down, with a hook to what location?

    I think i may have missed something ๐Ÿ™‚

    Is this for the Primary Navigation ? If so using the CSS methods to style the top level menu and its sub-menus is the best way. Let me know.

    #2320268
    William

    Hi David,

    That makes sense. What type of CSS would mean only affecting one of the menu items and the dropdowns for that menu item?

    For example, see the staging (link in private area). I am looking to style the ‘Premium’ and everything under the ‘Premium’ nav item to a different color, and make it more of a button.

    Kind regards,

    Will

    #2320379
    Ying
    Staff
    Customer Support

    Hi Will,

    You can try this method to style the Premium menu item:
    https://docs.generatepress.com/article/adding-buttons-navigation/

    To style the sub-menus of the Premium menu item, try using this selector:
    .main-navigation .main-nav > ul >li.nav-button > ul > li > a

    For example:

    .main-navigation .main-nav > ul >li.nav-button > ul > li > a {
        background-color: purple;
    }
    .main-navigation .main-nav > ul >li.nav-button > ul > li:hover > a {
        background-color: blue;
    }
    #2321026
    William

    Hi Ying,

    Thanks for that – I’m not sure if you are aware, but Leo recommended me that. The issue is that I want it to look like a button, with a drop down menu underneath it.

    Currently, when applying a background to it, it looks like this:

    Is there a way to make it look like a button?

    Kind regards,

    Will

    #2321187
    David
    Staff
    Customer Support

    Try this CSS:

    @media (min-width:769px) {
        .main-navigation .main-nav ul li.nav-button > a {
            background-color: #f00;
            border: 2px solid #000000;
            color: #000000;
            border-radius: 6px;
            line-height: 35px;
        }
    }

    And make sure the menu item has the CSS class of: nav-button

    Note that the line-height: 35px; value is important for setting the button height.

    #2321200
    William

    Ah that’s great thank you!

    #2321240
    William

    One last point, is there a way to make there be a hover effect, which stays showing when the drop-down menu is explored?

    #2321244
    David
    Staff
    Customer Support

    Can you share the link to the site again ? ( Resolving a topic automatically removes any Private Information )

    #2321303
    William

    Apologies for that; details attached again.

    I’ve styled the button, and then on hover. However, I would like to keep the same hover effect even when choosing options in the button’s dropdown.

    Kind regards,

    Will

    #2321305
    David
    Staff
    Customer Support

    Remove the CSS you have and use this instead:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button > a {
            background-color: #039ae5 !important;
            color: #fff;
            border-radius: 5px;
            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
            display: inline-block;
            font-weight: 600;
            transition: 300ms;
            line-height: 35px;
        }
        .main-navigation .main-nav ul li.nav-button:hover > a {
            background-color: #fff !important;
            color: #222 !important;
            border-radius: 7px;
            box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
            text-decoration: none;
        }
    }

    For reference this line:

    .main-navigation .main-nav ul li.nav-button > a:hover

    was changed to:

    .main-navigation .main-nav ul li.nav-button:hover > a

    By moving the :hover to the li element, we maintain the hover state whilst over the sub-menu.

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