Burger/Mobile Menu / How can I get it bigger/thicker?

Hey Carsten,
To make the burger icon bigger, please go to Enfold Theme Options > Main Menu > Burger/Mobile Menu > Menu Icon Style
and choose “Default” from the drop down:

If you would like it even larger, Please try this code in the General Styling > Quick CSS field:

.av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
    width: 50px !important; 
    height: 6px !important; 
}

Please adjust to suit.

To change the mobile menu brake point so the mobile menu never shows, Please try this code in the General Styling > Quick CSS field:

@media only screen and (max-width: 1366px) and (min-width: 200px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: block !important; 
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
      display: none !important; 
  }
}

Best regards,
Mike

Hi,
Glad to hear, we will leave to open to hear back from you.

Best regards,
Mike

Hi,
Please included a link to your site and a admin login so we can see if there is a conflicting css that keeps the second snippet from working.
This snippet starts working at 200px, the smallest mobile screen is typically 325px, I wrote it like this to try to overcome current css rules and stop working at laptop screen sizes, where your other rules will pick up.
But I’ll be able to better evaluate once I can examine your site.

Best regards,
Mike

Hi,
Thank you for the login, I see that my code snippet doesn’t work for what you wanted, completely remove the mobile menu and use the main menu instead.
The best solution I found was to edit the layout.css and change line 2283 to this:

@media only screen and (max-width: 77px) {

Please clear your browser cache and check.

While this works, I note that for mobile devices your menu creates 3 lines because it is too large for the screen. We can make the menu font smaller and reduce the menu padding, but on the smallest screens there will still be two menu items that start a second line.
This is the css I added to your Quick CSS:

@media only screen and (max-width: 767px) { 
.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
font-size: 12px !important;
padding-left: 10px !important; 
margin-left: -10px !important; 
}
.av-main-nav > li > a {
    padding: 0 7px !important; 
}
.av_seperator_small_border .av-main-nav > li:first-child > a > .avia-menu-text {
    border-left: none;
padding-left: 13px !important; 
}
.responsive #top #wrap_all .container {
    width: 95% !important; 
    max-width: 95% !important; 
}
}

Best regards,
Mike

Hi,
I have restored the line 2283 to as it was before, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Yes the navigation works correctly on my mobile and desktop, because I am logged in to your WordPress site.
If I log out of your WordPress site then all of the navigation links are redirected to the homepage.
This is due to your settings at: Enfold Theme Options > Maintenance Mode.
Please un-check this option, or login to your WordPress admin page.

Best regards,
Mike

Hi,
Thank you, Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike