Header drops into a new row below logo on screen widths below 1202px

Question

dear canvas team,

Unfortunately the main navigation drops into a new row below the logo between 992px (below is mobile nav) and 1202px. I tried to add paddings to the s as was suggested in another thread in this forum as well as reducing the font size, but it didn't work for me. Do you have an idea how to fix it? I will attach screenshots where you can see the issues.

thank you in advance

SemiColonWeb · Accepted Answer

Hello,

This Happens when there are too many items in the Menu than it can accommodate and is larger than the available width. Consider adding the following CSS Code:

.device-md #primary-menu ul li a {
	padding-left: 12px;
	padding-right: 12px;
	font-size: 12px;
	letter-spacing: 0;
}

You can tweak it according to your requirements so that it best fits the available width.

Let us know if we can help you with anything else or if you find any further issues.

nehalsv · Answer

Hi,

I have a different issue. On reducing the size of the window but not reducing the resolution my header drops below. Is there any problem with my code? My website address is http://nsc-mc.org

I tried explaining my client that it is responsive site but he is not ready to accept my argument and insisted that I put up this question in support.

Pls reply ASAP.

Thanks in advance

Nehal

Semicolon Web · Answer

Hello,

We have just checked out your Website and actually the Header you are using is the Default Layout for the Construction Template: http://themes.semicolonweb.com/html/canvas/demo-construction.php which you are using for your Website so there does not seem to be any error with the Code. To have the Menu beside the Logo, you will need to choose another layout.

Hope this Help!

Let us know if we can help you with anything else or if you find any further issues.