How can i get make a hamburger menu for mobile and tablet view only - Avenue template

Site URL: https://www.on2design.co.uk

Hello all,

Im in desparate need of help, as this is driving me mad!! :(

I am using the Avenue template and ! am trying to integrate a hamburger icon into my site to show on mobile and tablet (portrait and landscape view) as my navigation layout breaks in these views.

I have am able to get a hamburger to work on mobile using this code:

// create hamburger icon //
#mobileMenuLink {
    position: relative;
  margin-bottom:0px;
  }

  #mobileMenuLink a {
    color: transparent;
  }

#mobileNavWrapper.wrapper {
    margin-bottom:-50px;
}

#mobileMenuLink a:after {
    content: '☰';
    color: black;
    width: 100%;
    text-align: center;
    text-size: 25px;
    position: absolute;
    top: 0;
    left: 0;
  }
 

I have tried solutions on similar posts—but whatever i try, i cant get it to work for tablet views.

I have tried placing the code within breakpoints (im not great at coding so, im just stabbing in the dark), the code below has the variable set near the top of the css file (variable: @tablet: ~"only screen and (min-width: 751px)";):

css code
@media @tablet {
  // Code here
}

Should this work, or Im i approaching the problem incorrectly?

I have attached screenshots from my mobile that i want to mirror for the tablet.

I appreciate any help given.

https://www.on2design.co.uk

Hi. Have you solved this? Can you share the code for other members?