[Resolved] Transparent menu in mobile view

Home Forums Support [Resolved] Transparent menu in mobile view

Home Forums Support Transparent menu in mobile view

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

    #790149
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

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

    #801205
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #818304
    trung

    I got it. Thank you, Tom.

    #818867
    Tom
    Lead Developer
    Lead Developer

    No problem πŸ™‚

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