Providence Theme Menu Bar Adjustments

Solved
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

Shopify Partner
12398 1505 4490

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
5 0 3

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

0 Likes
Shopify Partner
12398 1505 4490

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
5 0 3

vtts123 is the password, thanks.

0 Likes
Shopify Partner
12398 1505 4490

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
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

Shopify Partner
12398 1505 4490

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tourist
5 0 3

Both codes have resolved my problem. Thank you very much

Shopify Partner
12398 1505 4490

@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 Expert | 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