Primary Menu Responsive

Question

When viewing the website at in these ranges 1000 wide to 1200 wide the primary menu goes below the logo. I have added the code below to the style sheet to make the text smaller but it is not working. Is there another way to make the size of the menu link smaller when viewing at 1000wide or 1200wide?

@media (min-width: 1199px) {
.primary-menu > .menu-link {
display: block;
line-height: 22px;
padding: 14px 5px;
color: #444;
font-weight: 700;
font-size: 0.6325rem;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Lato', sans-serif;
}}

SemiColonWeb · Accepted Answer

Hello,

The issue that is occurring on your Header right now is when there are too many items or Longer Items in the Menu than the available width on the Device.Consider using the following CSS:
[ch_pre type="css"]@media (min-width: 992px) and (max-width: 1199.98px) {
.menu-container > .menu-item > .menu-link {
padding-left: 5px;
padding-right: 5px;
font-size: 11px;
letter-spacing: 0px;
}

#header:not(.sticky-header) #logo img {
    height: 70px !important;
    margin-top: 15px;
    margin-bottom: 15px;
}

}[/ch_pre]

This should definitely fix the issues. You can change the Values depending on the Number of Items you have on the menu. Hope this Helps!

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