Menu Disappear Due to Browser Zoom

Hello,

My home page menu contains the following categories

Home, Services, Blog, Resources, About Us, Contact

When I set the chrome and IE zoom to 100%, the menu disappear.
The menu only appear when set zoom to 67%.

Any idea how to resolve this? Thank you!

Hello there,

Please share a link to your site so I can have a look. Visit our demo site to check if the issue only appears on yours. https://athemes.com/airi-demos/

Regards,
Kharis

Hello! sorry if I could not share yet since it is my client. However if I reduce the number of items from the menu from 5 to 2. It works properly. Is it because of the width? Anyway to maximize the width so that it can contain all menu items?

Hello there,

Do you have a link to your site to allow me checking it directly from here? Probably I could suggest you some CSS code to achieve it.

Regards,
Kharis

Hello,

unfortunately it is in localhost. no live environment.

Could you kindly provide me with the menu css that I can increase the width? Seems like the menu width is restricted hence the menu item got wrapped and fall to 2nd line when I zoom the browser view %

Your help will be much appreciated for this awesome template :slight_smile:

I managed to solve it :slight_smile:

    .main-navigation ul {
        width: 1000px;
    }
    .main-navigation ul {
        width: 800px;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    .main-navigation ul ul {
      width: 20px;  
    	float: left;
        position: absolute;
        padding-top: 15px;
        top: 100%;
        left: -999em;
        text-align: left;
        z-index: 99999;
    }