Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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;

  #mobileMenuLink a {
    color: transparent;

#mobileNavWrapper.wrapper {

#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.


menu closed.jpg

menu openned.jpg

Edited by Nathan_G
giving extra context.
Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...