menu transparency and screen size

Question

Hello,
I hope you are well.
The menu moves down a line on the tablet-sized screen and becomes unattractive and difficult to use because it no longer has a transparent background. Please see attached. I would like to force the menu to turn mobile at a larger size than it does by default. Which lines should I edit to do so? Thank you. Best regards.

SemiColonWeb · Accepted Answer

Hello,

This issue is caused because of the Full Width of the Header and as the Size of the Header decreases on Smaller Devices, the Logo and Menus adjust themselves accordingly to the available width. You can consider decreasing the Size of the Text in the Menu. Consider using the following CSS Code:

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

You can decrease the Font Size/Padding according to what suits you best. This should definitely work fine. Hope this Helps!

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

noornaj · Answer

Yay! Thank you for your prompt reply and for the fix. It worked perfectly. Take good care and have a great day!

Semicolon Web · Answer

Hello, Really Glad that your issues were resolved. Do let us know if we can help you with anything else or if you find any further issues with Canvas. Have a Great Day!