Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 21, 2017 at 3:01 pm #891153
    KingFilly

    Hi Moderators,

    Im building a website with enfold.
    I have some problems with showing the menu and logo on smaller screens.
    – the hamburger menu should be displayed under width 1220 px.
    – the logo on mobile/ tablet should have some (top) padding

    need some Custom CSS for this :)
    Hope you guys can help me out.

    website link in private content section

    December 21, 2017 at 4:07 pm #891176
    Yigit

    Hi,

    Please refer to this post – https://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    Regards,
    Yigit

    December 21, 2017 at 4:41 pm #891195
    KingFilly

    thanks yigit.
    That did the trick.

    And what about the other question?

    I’ll try to explain what im trying to accomplish:

    I added a screenshot in the private content. This is how i would like to have the logo and that it stays like this when you change between 768px and 1220 px.
    Situation now is that the logo jumps, but i would like to keep in the white shape from the slider.

    <768 px width is fine (tablet and mobile)
    >1220 px width is fine

    but everything in between the logo jumps… :(

    • This reply was modified 6 years, 12 months ago by KingFilly.
    January 3, 2018 at 2:44 am #892682
    Ismael

    Hi,

    Use css media queries to adjust the max height and width of the logo on smaller screens.

    @media only screen and (max-width: 1219px) {
  /* Add your Mobile Styles here */
  .responsive .logo img {
    max-height: 40%;
  }
}

    Best regards,
    Ismael

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