Mobile Breakting Point - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

November 9, 2018 at 11:55 am #1031616

Hi,

Currently the breaking point from desktop to mobile is 767 px, although the “Main Menu/General – Menu Items for mobile” is defined as “Activate for Smartphones and Tablets (brwoser width below 990 px)”.

How can I change the Breaktingpoint, concretely: I would like to have the Mobile Menu displayed up to a screen size of 1300 px.

I have tried the following code from https://kriesi.at/support/topic/enfold-mobile-burger-menu-breaking-point/ :

@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: block;
  }
}

unfortunately without success.

Thank you very much for your support.

Best regards,
Esther

November 13, 2018 at 4:22 pm #1033053

Nikko

Inactive Moderator

Hey Esther,

Can you try adding this css code instead:

@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .html_header_sidebar #header .av-main-nav > li {
    display: none;
  }

  .html_header_sidebar #top #header .av-main-nav > .av-burger-menu-main {
    display: block;
  }
}

Best regards,
Nikko

November 14, 2018 at 4:41 pm #1033550

zugerberg-finanz

Participant

Hi Nikko

Thank you for your Feedback. I’ve inserted the code, but unfortunately it doesn’t help either. Any other idea?

Best regards,
Esther

November 15, 2018 at 11:48 am #1033897

Nikko

Inactive Moderator

Hi Esther,

Can you try replacing it with:

@media only screen and (max-width: 1366px) and (min-width: 768px) {
  .html_header_sidebar #header .av-main-nav > li {
    display: none !important;
  }

  .html_header_sidebar #top #header .av-main-nav > .av-burger-menu-main {
    display: block !important;
  }
}

Best regards,
Nikko

November 16, 2018 at 9:44 am #1034337

zugerberg-finanz

Participant

Hi Nikko

It still doesn’t work…
Question: Why is the breaking point – even if “browser width below 990px” is set – at 767/768 px? (I did this test without CSS).
Regarding your code: I’m not so good at it, but I think the “header_sidebar” might be the problem, because I use the “sidebar left”.

Best regards,
Esther

November 16, 2018 at 11:03 am #1034366

Nikko

Inactive Moderator

Hi Esther,

I see, that option only works for Top Header and not for Left Sidebar and Right Sidebar.
Try to place the code I gave you with:

@media only screen and (max-width: 1366px) and (min-width: 768px) {
    html.html_header_sidebar #wrap_all {
        background-color: white;
    }

    .responsive.html_header_left #main {
        margin-left: 0;
    }

    .responsive #top #wrap_all #header {
        position: relative;
        width: 100%;
        float: none;
        height: auto;
        margin: 0 !important;
        opacity: 1;
        min-height: 0;
    }

    .responsive #top #wrap_all .av-logo-container {
        padding: 0;
    }

    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {
        height: 80px;
        line-height: 80px;
    }

    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }

    .responsive #header_main .container {
        height: auto !important;
    }

    .responsive #top .logo {
        position: static;
        display: table;
        height: 80px !important;
        float: none;
        padding: 0;
        border: none;
        width: 80%;
    }

    .responsive .logo a {
        display: table-cell;
        vertical-align: middle;
    }

    .responsive .logo img {
        height: auto !important;
        width: auto;
        max-width: 100%;
        display: block;
        max-height: 80px;
        margin: 0;
    }

    .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }

    .responsive #top .av-logo-container .avia-menu {
        height: 100%;
    }

    .responsive #top .av-main-nav .menu-item {
        display: none;
    }

    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block;
    }
}

I have tested this on my end, it should work on yours as well if there’s no conflict in css code.
Let us know if this helps.

Best regards,
Nikko

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.