Debut Theme Problem (mobile version)

[Wijnen]

Dear sir, madam,

First I got the problem that it wasn't possible to overlay the main image behind the main menu. I got advise that I should adjust the code, so I added the following code in assets->theme.css:

.template-index .site-header {position: absolute;background: transparent !important;}
.template-index .site-header__mobile-nav {background: transparent !important;}

The problem is now solved if I open my website www.printjeskoning.nl on a computer, but now I don't see the main menu when opening the website on a mobile.

Could someone please help me?

Kind regards,

T

[LitExtension · Accepted solution]

Hi @Wijnen, 

Please place this code at the end of theme.css

.mobile-nav-wrapper {

    -ms-transform: none;

    -webkit-transform: none;

    transform: none;

    position: absolute;

    top: 100%;

    left: 0;

    background-color: var(--color-body);

    transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);

    display: none;

    overflow: hidden;

    width: 100%;

}

.mobile-nav-wrapper.js-menu--is-open {

    display: block;

    z-index: 999;

    transform: none !important;

}

.page-container {

    transform: none !important;

}

Link to refer: https://prnt.sc/12pqlla

Hope this helps.

[Wijnen]

Your the man!