[Support request] Nav menu dropdown styling

Home Forums Support [Support request] Nav menu dropdown styling

Home Forums Support Nav menu dropdown styling

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1524889
    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.

    #1525041
    David
    Staff
    Customer Support

    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.

    #1525492
    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?

    #1525607
    David
    Staff
    Customer Support

    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?

    #1525752
    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.

    #1526007
    Elvin
    Staff
    Customer Support

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

    #1526283
    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)

    #1526454
    David
    Staff
    Customer Support

    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
    #1526959
    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?

    #1527008
    David
    Staff
    Customer Support

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

    #1527026
    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.

    #1527555
    David
    Staff
    Customer Support

    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.

    #1527990
    ken

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

    #1528106
    David
    Staff
    Customer Support

    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.

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