[Support request] Nav menu dropdown styling

[ken]

Hi,

I am opening a new post as per Leo requested from https://generatepress.com/forums/topic/customize-header-2/page/3/#post-1524174

I have a dropdown on my menu and I would like to know how to style the background color of the menu to when
– hover -> a mix of blend of color
– selected -> a solid (opacity:1) color

For the mix color i tried background-blend-mode:lighten & multiply which didn’t work and also opacity which didn’t mix the colors.

[David]

Hi there,

background-blend-mode only applies if the element has a background-image and a color style applied to it. It cannot be used for blending two colors.

Instead you would need to set your own ‘blended’ color as the hover color.

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

[ken]

Hi there,

Do you mean select a background color that is the “blend” of box colors? What I want to have is an effect of a background color and a “filter” over it. I think it can’t be done by selecting a particular color can it?

[David]

Theres no simple way to Blend two background colors.
The most that can be done is to insert a CSS psuedo element that sits between the Menu List item and the Menu Link. This could have a semi opaque color. But whats not possible is that it blends with the solid color behind it.

If we look at the Customizer > Color > Primary Nav -> Sub Menu options you have

Background
Background Hover
Background Current

Are you wanting to change just the Background Current when it is being hovered over?

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

[ken]

just when it’s hovered over and then solid when it’s selected

I do not see the primary nav, I only see customize -> colors and then the various colors available.

[Elvin]

Hi,

I do not see the primary nav, I only see customize -> colors and then the various colors available.

You need to have GP premium’s Colors module enabled through Appearance > GeneratePress and activate Colors.
https://docs.generatepress.com/article/colors-overview/

What I want to have is an effect of a background color and a “filter” over it.

Can you specify what kind of filter are you trying to achieve?

If you’re trying to add some sort of gradient filter to the menu on hover, you may have to resort to custom CSS.

Example:

li.menu-item > a:hover {
    background-image: linear-gradient(90deg, rgba(179,79,105,0.2) 9%, rgba(7,7,13,0.2) 48%, rgba(0,212,255,0.2) 85%); 
}

As for the color state when selected, use this css:

li.menu-item > a:focus {
    background-color: white;
}

A wise man once said:
"Have you cleared your cache?"

[ken]

Can you specify what kind of filter are you trying to achieve?

I am trying to get two layers of color, the base color which is the “original” color with opacity 1 and then when hovered over a “semi-transparent”/opacity 0.5 layer to “filter” it.

Hope it’s clear enough.

Base color: rgba(79, 98, 237, 1)
hover/Filter/2 layer: `background: rgba(221, 156, 174, 1) 0% 0% no-repeat padding-box;
opacity: 0.7;`
selected: rgba(221, 156, 174, 1)

[David]

The colors assigned to the Menu items for background, hover and current all exist on the Menu item <a> element. There are no separate layers. So to create an overlay effect would require CSS but this would also overlay the text. Which means we would have to overwrite all of the Menus CSS.

Whereas the simplest option is to calculate the the Hover color.

I took your base color and hover color and calculated the blended color in Affinity Desinger and output them as sRGB which resulted in the following hex colors

Background: #4F62ED
Background Hover: #B28AC0 ( 70% opacity ) or #4748B9 ( 70% multiply ) or #B28AED ( 70% lighten )
Background Current: #DD9CAE

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

[ken]

what you are suggesting is very different from what I want to do it seems.

Here is what I would like to achieve. Is this possible?

[David]

Have you tried the adding the colors i provided to your Customizer > Colors > Primary Nav Sub Menus?

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

[ken]

ah i think that works, thanks!

Could you also tell me how to make the menu item that has the dropdown to not be a page/unclickeable? Currently, the menu item about (with the dropdown) is still clickable.

[David]

Glad to hear that! Much simpler than rewriting the Navs color CSS 🙂

Simply replace the Menu Items URL with a #
Then it will simply serve to open the drop down.

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

[ken]

Thanks! And is there also an easy way how can I remove the arrow on the dropdown?

[David]

Add this CSS:

.main-navigation .main-nav ul li.menu-item-has-children>a {
    padding-right: 20px; /* adjust the 20px to match your menu item width */
}
.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

In Customizer > Layout > Primary Navigation you can set the Navigation Dropdown to Click – Menu Item as well as check the Menu Item Width.

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

[Author]

Posts