Shopify themes, liquid, logos, and UX
Hello,
I have Providence Theme and would like to accomplish 3 things:
1. Bold the Menu bar links for the main menu items
2. center the sub menu items instead of left aligned
3. expand each sub menu column so the links fit on 1 line
any tips? going through the code files has been tough.
Solved! Go to the solution
This is an accepted solution.
Thanks for update
ul.level-2.clean-list.flex {
justify-content: center;
}
#app-header #app-lower-header .menu ul.level-1 li.level-1 .submenu ul.level-2 li.level-2 {
-webkit-flex-basis: calc(25% - 20px);
-ms-flex-preferred-size: calc(25% - 20px);
flex-basis: calc(25% - 20px);
}
Hello, @JustinVTTS
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for store URL.
sorry your store is password protect can you please share us
Thanks
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
ul.level-2.clean-list.flex {ustify-content: center;}
li.level-1.inline-block a.inline-block {
font-weight: 600;
}
li.level-3.block a.inline-block {
font-weight: normal;
}
Thank you for your assistance, This worked for bolding the titles, but it did not center the menus, and some of the links are falling to a second line. Is there a way to expand the columns so there is a bit more space? I appreciate your help.
This is an accepted solution.
Thanks for update
ul.level-2.clean-list.flex {
justify-content: center;
}
#app-header #app-lower-header .menu ul.level-1 li.level-1 .submenu ul.level-2 li.level-2 {
-webkit-flex-basis: calc(25% - 20px);
-ms-flex-preferred-size: calc(25% - 20px);
flex-basis: calc(25% - 20px);
}
Both codes have resolved my problem. Thank you very much
Thanks for update and support.
User | RANK |
---|---|
136 | |
92 | |
87 | |
61 | |
51 |
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...
ByYour online store speed can enhance your store’s discoverability, boost conversion rates a...
ByShopping is at our fingertips with mobile devices. Is your theme optimized to be user-frie...
By