Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 21, 2015 at 4:55 pm #476617
    simonac

    Hi,

    i have a kind of a frame in a color section. There is use z-index: 1000; so that the following content slips a lillte under this frame.

    The problem is, that the mobile menu is not visible now. It is under that image an can not be clicked. How to bring the menu back on top?

    And a second thing: Can i specify the image height for this image on mobile devices? Because on mobile phone the image is to big.

    Thanks Simon.

    July 22, 2015 at 12:57 am #476789
    Dake

    Hey simonac!

    You can try using a media query like the below to adjust the z-index and background size at certain screen sizes::

    @media only screen and (max-width: 768px) {
#kleckse .av-section-color-overlay {
  z-index: -1 !important;
  background-size: contain !important;
}
}

    Regards,
    Dake

    July 22, 2015 at 10:18 am #476959
    simonac

    Hi Dake,

    i used z-index: 10 and the image looks good now.
    Now i have the problem that the whitespace i used for positioning the following content to the correct place was way too much on mobile. So i used this code to remove it on mobile

    @media only screen and (max-width: 640px) { 
.ws { display: none !important; }}

    But now i need to add aother whitespace to adjust the image to the correct place for mobile. Can you help me with that? What is the code for this when i place a custom css like “ws_mobile” for this whitespace.

    Also the empty space below the slider is too much. How to reduce this on mobile?

    Thanks Simon

    July 22, 2015 at 3:52 pm #477155
    Dake

    Hi!

    Instead of removing it completely, you could try a negative margin-bottom like the example below:

    @media only screen and (max-width: 640px) { 
.ws { 
  margin-bottom: -20px !important; 
}
}

    To reduce the white space below the slider, you can use the below:

    @media only screen and (max-width: 768px) {
.html_minimal_header #main > .avia-builder-el-0 {
  margin-bottom: -50px;
}
}

    Bot margin-bottom values can be adjusted to your liking.

    Cheers!
    Dake

    July 22, 2015 at 4:33 pm #477193
    simonac

    Awesome Dake!

    Thank you very much!

    Simon

    July 22, 2015 at 4:38 pm #477198
    Dake

    Hey Simon!

    You’re welcome :)

    Please let us know if you ever need help in the future.

    Best regards,
    Dake

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘mobile menu issue’ is closed to new replies.