Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 16, 2017 at 6:28 pm #877656
    msbllc

    Hi Team,
    I am working on this site and they have a long menu and I cannot seem to make it turn into the burger menu at a certain size. Here is the css I am using. What am I doing wrong?

    Also, what would the css be to change the burger menu 3 lines on a transparent header but keep it a different color on a normal header? (see the website in private content area – home page vs other pages)

    @media only screen and (max-width: 1150px) and (min-width: 768px) { .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    top: 0;
    left: auto;
    right: 0;
    display: block;
    }
    }

    November 18, 2017 at 10:50 am #878465
    Nikko

    Hey msbllc,

    Try using this css code:

    @media only screen and (max-width: 1150px) and (min-width: 768px) { 
  #header #avia-menu li.menu-item {
    display: none;
  }

  #header #avia-menu li.av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    November 20, 2017 at 10:23 pm #879385
    msbllc

    Thank you Nikko – I assumed I was grabbing the wrong selectors but wasn’t sure what the correct ones were. Chrome has changed up their inspect element which some times makes it harder. I appreciate the insight though!

    November 21, 2017 at 3:55 pm #879779
    Nikko

    Hi,

    You’re very much welcome. Let us know if you need further assistance :)

    Best regards,
    Nikko

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