Masthead And Navigation Menu On Mobile Devices

Support
#1

On the home page only of http://www.taylorhydrate.com/, I added
.masthead {
position: absolute;
width: 100%;
}
so the first section background image would be under the navbar and top bar. It looks great on a desktop. But I can’t figure out how to make it look correct on mobile with the full screen image background. Also, when clicking the navbar it overlaps the content instead of pushing it down like on all the other pages. How can I fix this?

#2

To fix it,

Please replace your code with this.

@media(min-width:979px) {
.home .masthead {
position: absolute;
width: 100%;
}
}

@media(max-width:979px) {
.x-navbar-inner { 
    padding-bottom: 20px;
}
}

Hope this helps

#3

I was trying to accomplish the mobile version to also still have the background image under the logo and mobile nav bar for that full screen image effect…not just a colored navbar background then the image bellow. Is this possible?

(Extra but not necessary: when the mobile navbar is clicked, then a background color slide from the top under the logo and mobile navbar links.)

#4

Hi There,

Are you referring to the background-image being cut off? unfortunately, background-image is responsive in that way, please take a look on this. The only way to correct that is to upload a portrait oriented version of that image and switch with custom CSS when the page is viewed on mobile.

That is because you set the header to position: absolute; We can only change the background color of that dropdown if you like, else you need to remove the position: absolute;

Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.