Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #818092

    Hi,

    I’m trying to show the mobile menu at a specific resolution, but I can’t manage to make it look the same as the one under 767px, I found this code, but and tried some more styles without success, any ideas?

    @media only screen and (max-width: 1024px) {
    nav.main_menu {display:none !important;}
    #advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
    }

    Thank you.

    #818229

    Hey C-LabMX,

    You can change the setting to show it earlier in the theme options under main menu > burger/mobile.

    Best regards,
    Victoria

    #819053

    Hi Victoria,

    I want it to appear at 850px, is it possible? I saw the option that you mentioned, but is for 990px or 767px only

    Thank you

    #819149

    Hi,

    Please try this out:

    @media only screen and (max-width: 850px) {
    nav.main_menu {
      display:none !important;
    }
    #advanced_menu_toggle, #advanced_menu_hide {
      display:block !important;
    }
    }

    Best regards,
    Rikard

    #819156

    Hi Rikard,

    I tried that code in some attempts I made before, but I’m trying to mimic the design used at a with of 767px or lower.

    You can see both menus in the images.

    Thank you for your response.

    #819196

    Hi,

    Ok, thanks for the feedback, though I can’t reproduce the results like in your screenshots. The header stays white on all resolutions on my end, is that you intention?

    Best regards,
    Rikard

    #819700

    Hi Rikard,

    I kind of manage to replicate the same style by doing some digging [margins, remove the transparency header effect and the background color essentially], just one last question related: if I don’t want the header to be sticky under 850px is there a way to do it?

    Thank you!

    #819701

    If it helps someons [using a transparency header]

    @media only screen and (max-width: 850px) {
    nav.main_menu, .av_header_transparency.av_alternate_logo_active .logo a, .responsive .logo img {
    display:none !important;
    }
    #advanced_menu_toggle, #advanced_menu_hide {
    display:block !important;
    }
    div#header_main {
    background-color: #ffffff;;
    }
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
    div.container.av-logo-container {
        margin-left: 58px;
        margin-right: 58px;
        height: 80px!important;
    }
    .html_header_top.html_header_sticky #main {
        margin-top: 80px;
    }
    .logo {
        background: url("LOGO");
        width: WANTED WIDTH;
    }
    }
    #819722

    Hi,

    Thanks for sharing the solution that works for you, I think this would be very helpful to other who wants to achieve the same thing :)

    Best regards,
    Nikko

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