Don’t Want Hamburger Menu

Hello there,

I have already posted a solution for such kind of this purpose in our own support channel. You can follow it here in this link.

Regards,
Kharis

I used the css code you posted in the link and it looked great for about 5 seconds…then the menu items grouped together and are now appearing as a drop down menu that is static at the top.

It is only showing up this way on my ipad when I tilt it horizontally.

How can I fix this?

Hello there,

Have you done step 1-3 written in this thread?

Regards,
Kharis

I didn’t do 1-3 because I thought it was two different options. oops!

Also, I am concerned that you said “do at your own risk” and that it will be overwritten with the next update. I don’t want to break my site or have to keep entering code every time there is an update.

Is there no other easy way to do this without the risk?

If not, then perhaps I will just have to live with it the way it is…maybe move the hamburger menu to the right instead of center or something.

This woman has her menu area set up really nice…
https://katefruitflowers.com/

On my iphone it displays as a simple hamburger menu, which is fine, obviously for the small screen.

But on my ipad, both vertically and horizontally tilted, the menu shows up with all the items present, no hamburger.

Is there a way to tell what kind of settings she has or simple code that does not mess with the core of the theme?

Hello there,

Try doing the below steps:

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

;(function($) {
	
  $(window).on('load resize', function() {
    
    $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');
    $('#mainnav').find('.submenu').removeAttr('style');
    $('#header').find('.col-md-10').append($desktopMenu);
    $('.btn-submenu').remove();
    
  });  

})(jQuery);

4. Update
5. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.

  
  .btn-menu{
    display: none;
  }
  
  #mainnav{
    display: block;
  }
  
}

@media only screen and (max-width:767px){
  
  #mainnav{
    float: none;
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  
}

Regards,
Kharis