Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 11, 2014 at 12:06 pm #349282
    Coronacom

    Hello,

    I’m working on a new website using your enfold-child theme, with the restaurant demo. My main menu was overlapping the logo so I added in this code so that it switches to the mobile menu at the right time (1230px). I was wondering, is there a way to show a different menu as the screen gets smaller. So as each item overlaps the logo, a menu item is removed.

    so something like, when the screen is below 1200px, display ‘menu 2’ (which will have less menu items). and so on so forth until the mobile icon as a last option.

    Many thanks,

    November 11, 2014 at 5:40 pm #349554
    Yigit

    Hi Coronacom!

    “Coming Soon” page is active. Do you mind posting a temporary login to your website so we can see overlapping issue to provide you custom CSS code?

    Best regards,
    Yigit

    November 11, 2014 at 6:21 pm #349587
    Coronacom
    This reply has been marked as private.
    November 11, 2014 at 6:22 pm #349588
    Coronacom

    just to let you know, i removed the code i added to custom css that made the mobile menu appear before overlap.

    November 11, 2014 at 7:06 pm #349615
    Yigit

    Hey!

    Sorry but still cannot see your pages as user role is not administrator. Can you please change user role to administrator?

    Best regards,
    Yigit

    November 11, 2014 at 7:11 pm #349621
    Coronacom

    oh sorry, updated now for you!

    Thanks

    November 11, 2014 at 9:39 pm #349679
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 1200px) and (min-width: 1090px) {
.av-main-nav > li > a { padding: 0 6px; }}
@media only screen and (max-width: 1090px) and (min-width: 990px) {
strong.logo * { max-width: 85%; }}

    Best regards,
    Yigit

    November 12, 2014 at 1:02 pm #349983
    Coronacom

    Ok, thank you.

    Is it possible to change the mobile menu when it pops out so that it only covers around 30% of the screen on the right hand side, and you can still see the 70% of content?

    November 12, 2014 at 1:37 pm #349990
    Coronacom

    How do I display my secondary menu (called ‘menu_2’) when max-width:1080px; min width: 800px;

    • This reply was modified 10 years, 1 month ago by Coronacom.
    November 13, 2014 at 8:08 pm #350885
    Andy

    Hey!

    for menu:

    #mobile-advanced {
width: 70%;
}

    secondary menu:
    do you mean you want to display it instead of menu1? or additionally?

    Cheers!
    Andy

    November 14, 2014 at 11:30 am #351190
    Coronacom

    great, thank you that worked perfectly!

    I was thinking… display menu 1 when the screen size is above 1080px wide.

    Show menu 2 when the screen size is between 800 and 1079px wide

    then show the mobile menu on screen sizes below 799px wide.

    Is that possible?

    Thanks,

    November 15, 2014 at 5:43 am #351689
    Ismael

    Hey!

    You can add this below to hide the secondary menu on 1080px above then show it when screen size is between 800px and 1079px:

    @media only screen and (min-width: 1080px) {
ul#avia2-menu {
display: none;
}
}

@media only screen and (min-width: 800px) and (max-width: 1079px) {
ul#avia2-menu {
display: block;
}

ul#avia-menu {
display: none;
}
}

    Cheers!
    Ismael

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