Mobile Header Issue

Home Forums WpStream Theme Mobile Header Issue

New Topic

Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #89877
    artyvex.co.za
    Participant

    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!

    #89892
    admin
    Keymaster

    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

    #90020
    artyvex.co.za
    Participant

    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.

    #90036
    artyvex.co.za
    Participant

    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!

    #90054
    admin
    Keymaster

    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

    #90060
    artyvex.co.za
    Participant

    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!

    #90063
    artyvex.co.za
    Participant

    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?

    #90224
    admin
    Keymaster

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

    Thank you

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.