Header opacity mobile

[MaartenPex]

Dear support team,

I cant seem to find the solution to make the header and logo, on mobile, disappear. Then I want to keep the Search, Cart and menu icon. The rev slider should stick to the top of the page.

Could you please help me in this matter?

With kind regards,

Maarten

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
 div#logo a img{visibility:hidden !important;}
 div#logo a{color:#fff !important;}
}

Thanks
Mohammad

[MaartenPex]

Hello Mohammad,

Thanks for the Swift reply!!! 🙂 and it worked!

However if you would be so kind to have a look at the following problem.

The desired result is achieved, but when you now activate the hidden responsive menu on mobile it pushes the main-container down not enough due to the fact that I have given it a negative margin-top of -75px(to have the rev slider fillout the screen). The desired result is to have the menu drop down as it should and have the rev slider stick to the to as it is doing now.

Would you know a answer to this? Please find the attached images to have an idea of what i am trying to do.

Thanking you in advance,

Regards,

Maarten

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please change the lines at last code:-

Find this code:-
div#logo a{color:#fff !important;}

Change to :-
div#logo a{color:#000 !important;}
div#logo a i{color:#000 !important;}

Now use this custom css code also:-

@media only screen and (max-width: 767px) {
#header-section > #main-nav {
    background: none repeat scroll 0 0 #ffffff !important;
    border-top-color: #e4e4e4;
    position: absolute;
    width: 300px !important;
    z-index: 999;
}
}

[MaartenPex]

Dear Mohammad,

Thank you again for the help. Almost there I quess, but your suggestion does give me a strange white bar. Also when resizing the browser window it gives extra margin underneath the header area.

Could you perhaps have a look. Again I added the result which I explained above.

Regards,

Maarten

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please remove this code :-

@media only screen and (max-width: 767px) {
#header-section > #main-nav {
    background: none repeat scroll 0 0 #ffffff !important;
    border-top-color: #e4e4e4;
    position: absolute;
    width: 300px !important;
    z-index: 999;
}
}

And use this one new code:-

@media only screen and (max-width: 767px) {
#header-section > #main-nav {
    background: none repeat scroll 0 0 #ffffff !important;
    border-top-color: #e4e4e4;
    position: absolute;
    z-index: 999;
}
#main-navigation{width:300px !important;}
}

Thanks
Mohammad