Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 7, 2018 at 5:56 am #922741
    web4698

    I need to do this on 2 sites.I’ve tried the coding you supplied and nothing is working.

    March 7, 2018 at 8:09 am #922783
    Rikard

    Hey web4698,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Change the value 1024 to the pixel value of your choice.

    Best regards,
    Rikard

    March 7, 2018 at 4:19 pm #923113
    web4698

    Thank you that works!
    The issue that remains is the secondary menu in the top navigation doesn’t center in the laptop and tablet sizes.

    March 8, 2018 at 6:18 am #923564
    Rikard

    Hi,

    Please try this as well:

    @media only screen and (max-width: 1024px) {
#header_meta .sub-menu {
    display: table;
    margin: 0 auto;
    float: none !important;
}
}

    Best regards,
    Rikard

    March 8, 2018 at 7:25 am #923597
    web4698
    This reply has been marked as private.
    March 8, 2018 at 11:04 am #923728
    Nikko

    Hi,

    Can you try adding this css code:

    @media only screen and (max-width: 1024px) {
  #top #header #header_meta .sub_menu, 
  #top #header #header_meta #avia2-menu, 
  #top #header #header_meta #avia2-menu li, 
  #top #header #header_meta .phone-info {
    float: none;
    width: 100%;
    clear: both;
    text-align: center;
  }
}

    Hope it 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.