How to change the px for when the Burger menu appears?

Thanks Guenni007
It works fine for both desktop and mobile – but I get 2 burger menus on the Tablet version – and the 2 burger menus are placed under and behind the logo that is placed in the left corner.

So I still need some fixing :-)
It also looks like the breakpoint for the burger menu is still not working. Changing the value makes no difference.

The CSS is active now on the site.

Best,

Chrilles

• This reply was modified 2 years, 1 month ago by Chrilles.
• This reply was modified 2 years, 1 month ago by Chrilles.

Sorry, of course – here it is https://forcecertification.com/en/ – That has a double burger menu located on the left side. I would prefer one burger menu to the right.

The danish version https://forcecertification.com/da/ seems to have an issue with the main menu that goes into 2 lines – continuing in the banner where it is hard to see. It looks like the burger menu is behaving fine here.

Best,

Chrilles

Thanks Rikard,

The double burger menu is gone now – but now there is no menu at all between 750 – 1198px.

Do you want login?

Best
Chrilles

Thanks Rikard,

I am a little confused here about how much CSS code I should add.
I have tried various combinations and I am not able to make it work. I have also tried to clear cache and test in other browsers.

If you have time, please feel free to add the code and see if it is working. Se link in Private window

Best,

Chrilles

Thank you SO MUCH Rikard :-)
So appreciated!

I have pasted the code below for others to use.
Is all the code needed?

<pre><code>@media only screen and (max-width: 1198px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1198px) {
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block;
}
.responsive #top #wrap_all .main_menu {
    left: auto;
    right: 0;
    display: block;
}
#header_main_alternate {
  display: none; 
}
}

One more thing.
I see the main menu below the logo is now left-aligned. How do I align it to the right?
I haven’t been able to figure that out by looking in the CSS.

Best,

Chrilles

Thanks, Rikard, but it does not seem to work.
Also after clearing the cache and trying in an incognito window in 3 different browsers.
Can you see why?

Please feel free to use the login provided in the private window in my prev. replies.

Best,

Chrilles

Super thanks Rikard, it is working now.
Best,
Chrilles

For anyone else

<pre><code>@media only screen and (max-width: 1198px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1198px) {
.responsive #top .av-main-nav .menu-item-avia-special {
    display: block;
}
.responsive #top #wrap_all .main_menu {
    left: auto;
    right: 0;
    display: block;
}
#header_main_alternate {
  display: none; 
}
}

/*main menu align right */
.av-main-nav>li {
    float: right !important;
}