Mobile menu full-width on small tablet devices

  • Resolved lisakubbos

    (@lisakubbos)


    1 year, 1 month ago

    Hello,

    I just added a CSS-Snippet to my Website to make the mobile-menu-dropdown full-width. I am using the DIVI Theme.
    It perfectly works until 767 px. But between 768px and 980px there is a gap on the right side.
    Does anybody know, how I can fix this?

    Thanks and best, Lisa.

    This is the CSS I have added to make the mobile menu full-width:

    /* mobile menu full width and remove top-line*/
    .et_mobile_menu {
    min-width: 100vw;
    border-top:0;
    margin-left:-10vw;
    }

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @lisakubbos

    This is because your .et_pb_row_0_tb_header parent container is switching from 80% to 90% at 767px. Here is a revised version of your code to handle it:

    .et_mobile_menu {
  width: 100vw;
  border-top-width: 0;
}

@media only screen and (max-width: 767px) {
  .et_mobile_menu {
    margin-left: -10vw;
  }
}

@media only screen and (min-width: 767.99px) and (max-width: 980px) {
  .et_mobile_menu {
    margin-left: -5vw;
  }
}

    Hope it helps!

    Thread Starter lisakubbos

    (@lisakubbos)

    Thank you so much! That solved my problem.

    Awesome! ??

    Please, don’t forget to mark your post as solved. Thank you!

    Thread Starter lisakubbos

    (@lisakubbos)

    Done, thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile menu full-width on small tablet devices’ is closed to new replies.