Shopify themes, liquid, logos, and UX
Hello, my navigation menu is currently split on two lines, how can I get it all on one line? It looks like this on smaller and larger screens.
Site: savethedate-neon.myshopify.com
PW: twaosh
Thank you
Your menu has a lot of long words in them. When the space is all taken on one line, it will go to the next one. I have suggestions, but lease note that doing these will make readability harder for your customers (especially for those on smaller screens):
I personally recommend doing any of these to keep user experience good:
@Klmp82,
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:
@media (min-width: 750px){
.header__inline-menu{
display: flex;
margin-left: 10px !important;;
}
.list-menu--inline{
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.list-menu--inline *{
font-size: 10px !important;
}
.list-menu--inline li > a,
.list-menu--inline li summary{
padding-left: 3px;
padding-right: 3px !important;
margin-right: 10px !important;
}
}
You can try this code but, ideally, taking into consideration a good UX (which ultimately is what will generate you sales), you should not use code for this. The menus should be rethought to be as compact as possible.
Kind regards,
Diego
Hi @Klmp82 ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:
@media (min-width: 750px){
.header__inline-menu{
display: flex;
margin-left: 10px !important;;
}
.list-menu--inline{
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.list-menu--inline *{
font-size: 10px !important;
}
.list-menu--inline li > a,
.list-menu--inline li summary{
padding-left: 3px;
padding-right: 3px !important;
margin-right: 10px !important;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
Thank you, that solution worked for me as well. how do I center the menu? This is what is currently looks like.
User | RANK |
---|---|
71 | |
66 | |
65 | |
53 | |
48 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023