Mobile Header Issue

[artyvex.co.za]

Hello,

Please open artyvex.co.za on your mobile device. You will see that my Revolution Slider that I created is showing underneath the mobile nav menu. In other words, the mobile nav menu is showing ontop of the header image and isn’t showing the header image below instead of underneath.

Is this a theme issue or am I doing something wrong with my header layout? As I don’t see any specific options on the page creation to actually set where the header image appears.

Thanks!

[admin]

Hi,

I think is a problem with the theme with Revolution slider.
Use this css code and it should fix the problem.

@media only screen and (max-width: 1160px)
.home .header_media {
padding-top: 69px;
}
}

Thank you

[artyvex.co.za]

Thanks for your response.

It works for the “Home” screen however every other page that has the same sort of header doesn’t get fixed.

In order to fix the “Home” screen I inserted your code in my Customise > Additional CSS section:

@media only screen and (max-width: 1160px){} **Note the extra RBLaces it doesn’t work without these
.home .header_media {
padding-top: 69px;
}

And then I tried to place the above code directly into these individual pages, under the page settings, where it isn’t working ie.: artyvex.co.za/home/workshop

Still nothing changes these ones.

I had thought that the Customise > Additional CSS route would make a global change. However it has only fixed my “Home” page and not all of them that use the header.

[artyvex.co.za]

I also just realized that your code:

@media only screen and (max-width: 1160px){}
.home .header_media {
padding-top: 69px;
}

Ends up leaving a massive space between the menu nav and the header image on the desktop version. This I don’t want. Therefore I humbly request you provide another way of making the revolution header on mobile fit below the mobile nav menu.

Thanks!

[admin]

HI,

OK the code

@media only screen and (max-width: 1160px){
.home .header_media {
padding-top: 69px;
}

is creating a space for screens under 1160 px and only for home page. To make the code work only for small screens replace 1160 . For example for ipad is 1024 px.

Also if you want the code to work for all pages remove the .home

@media only screen and (max-width: 1160px){
.header_media {
padding-top: 69px;
}

If you have problems leave the code in place so i could look over.
Thank you

[artyvex.co.za]

Perfect, this ended up fixing all my issues.

Really really appreciate the help! Looking forward to seeing your future releases! This Theme and plugin is super dope!

[artyvex.co.za]

Oh yes one more question on this, I seem to have a lot of white space between my header image and the first row on my page. Do you have any code that I can use to minimize this?

[admin]

Hi,
You can remove that space by editing the page and using visual bakery controls : http://prntscr.com/ujimmg

Thank you

[Author]

Posts