[Resolved] Transparent menu in mobile view

[trung]

Hi GeneratePress,

I use Header Element for my website’s homepage (image 1 and image 2).
Image 1 – PC view
Image 2 – mobile view (not transparent)

I use below code for my menu – it works well on my other website. My all-right website is here (image 3 and image 4)
Image 3 – PC view – allright menu
Image 4 – mobile view – allright

My using code in both of 2 websites:

/*Create Animation Hover Navigation and in Docs GP*/ 

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

/*Change colors input and close-search in Search navigation*/
li.search-item.close-search a:before, span.search-item.close-search a:before {
    color: #ffffff;
}
.navigation-search input[type="search"], 
.navigation-search input[type="search"]:hover {
    color: #ffffff !important;
    background-color: #191246 !important;
}
.navigation-search, 
.navigation-search:active {
    color: #ffffff !important;
    background-color: #191246 !important;
}

/*Disable Hamburger menu jumps into center*/
.nav-search-enabled .wc-menu-cart-activated:not(#mobile-header) .menu-toggle {
    float: right;
    width: auto
}
/* Change color of hamburger */
button.menu-toggle:hover, 
button.menu-toggle:focus {
    background-color: transparent;
    box-shadow: 0 0 0;
}

The different between 2 website which I know is I set background color to overlay header in the problem case.

Please support me about transparent menu in mobile view. Thank you.

[Tom]

Hi there,

I’m not sure I’m seeing the difference between sites? Are you wanting the mobile menu to be transparent when you open it?

Let me know 🙂

[trung]

I don’t know how to change color of the mobile menu. I don’t know while website 2 have mobile menu’s color is blue, website 1 have mobile menu’s color is light black.

I still think the above code make mobile’s menu like background color of header.

Show me how to understand right way. And how to change color of mobile menu.

Thank you.

[Tom]

The color of the mobile menu should come from “Customize > Colors > Primary Navigation”. In there, you should find the black (and blue) colors.

Let me know 🙂

[trung]

I got it. Thank you, Tom.

[Tom]

No problem 🙂

[Author]

Posts