When Search is disabled Menu not working properly

Shapely
1

Hello Team,

When I Disable search in the header from first point of view it works fine, but then on smaller screens menu goes out of the box
Please check website protego.lt and try to resize it to smaller window you will see the anomaly.

Thank you for any response.

2

hey there

Hope you are having a good day and thank you for your question
Please add this CSS in appearance - customize - additional CSS

@media (max-width: 1120px){
.main-navigation .menu > li {
margin-right: 10px;
}
}

if this css can’t fully fix this problem consider using lower case menu elements

Thanks!
Colorlib Support Team

3

Hello team,

Thanks for the answer, but sadly it didn’t helped. Maybe then its possible to make hamburger menu when the screen is at that resolution specific position when text goes out of the menu?

Thank you in advance!

4

Hello there,

I hope you are doing well today.

Is www.protego.com the url to your website?

Best Regards,
Support

5

Hi again,
Correct url is bellow:
http://protego.lt

Regards,
Paulius Petkevicius

6

hi

No, chaning mobile menu appearance is not optioanal, please try this css:

@media (max-width: 1080px){
.main-navigation .menu li a {
text-transform: lowercase;
}
}

7

Hi team,

Still nothing, PFA images. maybe we need to increase white space between menu and image? maybe when search icon is disabled menu height is changed?

Regards,
Paulius Petkevicius

8

H

Lets add this code as well:

.main-navigation .container.nav-bar {
width: 100%;
}

please note, there is no physical space in the header, this can happen to any website if its possible consider to shorten the menu by one element

9

This CSS also did not helped. But took your advice to shorten the menu items.
Thank you for help!

Best Regards,
Paulius

10

Hello there,

I am glad the solution worked for you.
Has the issue been resolved for you?

Best Regards,
Support