Transparent menu in mobile view

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.