A user is experiencing a layout issue where their navigation menu header wraps onto two lines when longer menu items are added, disrupting the design’s appearance. They’re seeking a solution to keep the header on a single line regardless of content length.
Three different CSS solutions were proposed:
</body> tag (specific code provided in screenshot)All solutions involve adding CSS code to reduce menu font size at specific breakpoints, forcing items to fit on one line. Each responder provided code snippets and visual examples of their proposed fix. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.
Hey everyone!
Happy Wednesday! For the design on my landing page, as I introduce bigger words, it appears that the header went from a single line to a double and now it looks off. I am think and trying to see if there is a way to make it so my header will fit to size single line no matter what and be the correct size. Any additional help would be amazing!
Website: intisolarcar.com
Theme: Impact by Maestrooo
Hey @Giggl
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @Giggl
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.
@media screen and (min-width: 1150px) {
.header__link-list {
font-size: 17px !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hello @Giggl ,
Here are the steps to apply the necessary changes in your Shopify store:
@media screen and (min-width: 1150px) and (max-width: 1510px) {
ul.contents li {
font-size: 15px !important;
}
}
Let me know if you need further assistance!
