Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 8, 2017 at 6:57 am #818092
    odmv

    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.

    July 8, 2017 at 5:57 pm #818229
    Victoria

    Hey C-LabMX,

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

    Best regards,
    Victoria

    July 11, 2017 at 12:50 am #819053
    odmv

    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

    July 11, 2017 at 8:32 am #819149
    Rikard

    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

    July 11, 2017 at 8:39 am #819156
    odmv

    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.

    July 11, 2017 at 10:12 am #819196
    Rikard

    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

    July 11, 2017 at 11:26 pm #819700
    odmv

    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!

    July 11, 2017 at 11:29 pm #819701
    odmv

    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;
}
}
    July 11, 2017 at 11:54 pm #819722
    Nikko

    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

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