Organize Menu in Header with responsive Design

[BTV]

Hi There,

I am Using the Ethos Layout and Static Header bar with Main Menu.
The Header is fixed at the top while scroling down.

There are 11 Menu Items to display - so the Menu takes much space. Even if I resize the Browser Windows
to small, the Icons move up to second rows and the Menu looks very disgusting.
At perhaps 800px the mobile Button Navigation modal apperars and the Header looks even better.

Is there a way to organize my Header Menu better?
Where I can configure the Apperance of the mobile Button? I would set it to 1000px.

https://barmer-tv.de/preview/

Thanks for your fast support!

Greetz Murphy

[Alaa]

Hi @BTV

Yes, changing the mobile menu break-point would be the best thing to do in this case, this can be achieved by adding this CSS code to (Theme Options > CSS):

@media (max-width: 1200px){
    .x-nav-wrap.desktop {
        display: none;
    }
    .x-nav-wrap.mobile {
        display: block;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right;
    }
}

The code above will display the mobile menu till the browser window is less than 1200px wide.

Thanks.

[BTV]

Wow - thank´s Alaa for your fast and helpful answer.
It works

[Prasant]

You are most welcome.