Home › Forums › WpStream Theme › Mobile Header Issue
Tagged: header image
- This topic has 7 replies, 2 voices, and was last updated 1 year, 11 months ago by
admin.
-
AuthorPosts
-
September 16, 2020 at 10:31 am #89877
artyvex.co.za
ParticipantHello,
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!
September 16, 2020 at 12:47 pm #89892admin
KeymasterHi,
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
September 17, 2020 at 8:46 am #90020artyvex.co.za
ParticipantThanks 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.
September 17, 2020 at 11:08 am #90036artyvex.co.za
ParticipantI 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!
September 17, 2020 at 12:53 pm #90054admin
KeymasterHI,
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 youSeptember 17, 2020 at 1:23 pm #90060artyvex.co.za
ParticipantPerfect, 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!
September 17, 2020 at 1:30 pm #90063artyvex.co.za
ParticipantOh 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?
September 18, 2020 at 12:17 pm #90224admin
KeymasterHi,
You can remove that space by editing the page and using visual bakery controls : http://prntscr.com/ujimmgThank you
-
AuthorPosts
- You must be logged in to reply to this topic.