Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 27, 2020 at 7:26 am #1233443
    digitalnomadesarl

    Hello,

    I’d like to transform the font-size of the items in the main menu depending on the size of the screen.

    By default my top menu font-size is 18px.
    I’d like to change it to 11px if the size of the screen goes under 1100px.
    Then if the size of the screen goes under 900px i’d like to change to a burger menu.

    I’d like this to work on all type of devices (pc, tablets, smartphone…)

    Is that possible?

    Thanks and have a good day everyone.

    July 28, 2020 at 7:57 am #1233679
    Rikard

    Hey digitalnomadesarl,

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

    @media only screen and (min-width: 901px) and (max-width: 1100px) {
nav.main_menu .avia-menu-text {
  font-size: 11px;
}
}
    @media only screen and (max-width: 900px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Rikard

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