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

[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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Ying]

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;
}

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

Ah that’s great thank you!

[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?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts