[Support request] Customize header

Home Forums Support [Support request] Customize header

Home Forums Support Customize header

Viewing 8 posts - 31 through 38 (of 38 total)
  • Author
    Posts
  • #1520637
    ken

    Hi David,

    Thank you for your reply.

    So could you help me out with the following topics here and I will open a new topic for the search?
    – when the menu button is selected, the background turns white, how do i change that? Tired setting current-menu-item but it didn’t work.
    – dropdown background colour change when hover
    – menu background color when selected (at the page)
    for the navbar.

    #1520968
    Leo
    Staff
    Customer Support

    – when the menu button is selected, the background turns white, how do i change that? Tired setting current-menu-item but it didn’t work.

    Currently you are just using this selector for ths CSS: #menu-item-174 and not utilizing the menu-butt you’ve added at all.

    Can you try using the CSS suggested here?
    https://docs.generatepress.com/article/adding-buttons-navigation/

    #1521348
    ken

    by the css here, do you mean:

    @media (min-width:769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background-color: #ffffff;
            border: 2px solid #000000;
            color: #000000;
            line-height: 35px; /*this number will likely need to be adjusted*/
        }
    }
    

    ? I have implemented this class and styled it but I am still getting a white background when hover over it.

    #1521889
    Leo
    Staff
    Customer Support

    Remove this CSS:

    #menu-item-174 a {
        color: white;
    }

    Then modify this:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background: #4F62ED 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000040;
            border-radius: 30px;
            opacity: 1;
        }
    }

    to this:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background: #4F62ED 0% 0% no-repeat padding-box !important;
            box-shadow: 0px 3px 6px #00000040;
            border-radius: 30px;
            opacity: 1;
        }
    }
    #1522984
    ken

    Hi Leo,

    Seems to work, thanks!

    Can you tell me how to set the background color:
    – during hover with opacity and
    – when selected to solid?

    #1523004
    Elvin
    Staff
    Customer Support

    Hi,

    You can add :hover selector the hover state.

    Add this CSS in your @media (min-width: 769px) {...}:

    .main-navigation .main-nav ul li.nav-button a:hover {   
        background: rgba(79, 98, 237, 0.5) 0% 0% no-repeat padding-box !important; 
    }

    If you want smooth transition to the hover animation, add transition: background 0.5s;

    We basically modify Leo’s code a tad bit to something like this:

    @media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background: #4F62ED 0% 0% no-repeat padding-box !important;
            box-shadow: 0px 3px 6px #00000040;
            border-radius: 30px;
            opacity: 1;
            transition: background 0.5s;
        }
        .main-navigation .main-nav ul li.nav-button a:hover {   
            background: rgba(79, 98, 237, 0.5) 0% 0% no-repeat padding-box !important; 
        }
    }

    You can change the opacity value of the background on hover by changing “0.5” to something a lower/higher value.

    when selected to solid?

    I’m not sure I get what you mean. Can you explain further? thank you.

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

    #1523394
    ken

    Hi Elvin,

    Sorry for not making it clear, I would like to have the background of the dropdown (about) to have the different background color.

    With solid i mean the color being solid when the menu item is selected. The other thing is, I think opacity might not be what I need, is it possible to have the color to “mix” with the background? As in there are two layers of color and when hovered over, it will add an additional layer on top of it.

    Thanks!

    #1524174
    Leo
    Staff
    Customer Support

    Can you please open a new topic for the follow questions?

    As you can see it’s just getting a little bit hard to track on what the issue is etc.

    Thanks!

Viewing 8 posts - 31 through 38 (of 38 total)
  • You must be logged in to reply to this topic.