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


Nathan_G

Question

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

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

  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...