Providence Theme Menu Bar Adjustments

Solved
JustinVTTS
Tourist
5 0 3

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.

fix menu providence.png

KetanKumar
Shopify Partner
20323 2105 7615

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JustinVTTS
Tourist
5 0 3

my site is not quite live yet, it is www.voicetotextsolutions.com

0 Likes
KetanKumar
Shopify Partner
20323 2105 7615

@JustinVTTS 

Thanks for store URL.

sorry your store is password protect can you please share us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JustinVTTS
Tourist
5 0 3

vtts123 is the password, thanks.

0 Likes
KetanKumar
Shopify Partner
20323 2105 7615

@JustinVTTS 

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JustinVTTS
Tourist
5 0 3

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.

pic.png

KetanKumar
Shopify Partner
20323 2105 7615

This is an accepted solution.

@JustinVTTS 

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);
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JustinVTTS
Tourist
5 0 3

Both codes have resolved my problem. Thank you very much

KetanKumar
Shopify Partner
20323 2105 7615

@JustinVTTS 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes