Advice for Navigation Menu fitting all screen sizes?

[abierto_website]

I’ve been having trouble making sure the menu is fully responsive when the screen is smaller. I use a 27" so I don’t notice it but others will notice the menu dropping as the screen shrinks down. The menu drops under the logo and cuts off information at the top. I’ve already removed the Home link because it’s unnecessary.

Home | Abierto Networks

I made some css edits but it doesn’t quite do the job.

/Fix Menu Width/
.x-navbar .x-container.width {

width: 65% !important;
max-width: 100% !important;

}

@media screen and (min-width: 978px) {
body .x-navbar .x-container.width {
width: 65% !important;
max-width: 100% !important;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 10px !important;
padding-right: 10px !important;
}
}

@media (max-width: 1200px) {
.x-navbar .desktop .x-nav > li > a: {
font-size: 14px;
padding-right: 15px;
}
}

Any help on this is greatly appreciated!

[Joao]

Hi There,

Please remove the CSS you have added.

And replace with this :

@media (min-width: 979px) and (max-width: 1200px) {
.x-brand img {
   
    width: 100px;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {

    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
}}

Hope it helps!