Jump to content

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

Recommended Posts

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

Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 523
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.