Providence Theme Menu Bar Adjustments

Solved
Highlighted
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

1 Like
Highlighted
Shopify Partner
9267 1180 3265

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
1 Like
Highlighted
Tourist
5 0 3

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

0 Likes
Highlighted
Shopify Partner
9267 1180 3265

@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
1 Like
Highlighted
Tourist
5 0 3

vtts123 is the password, thanks.

0 Likes
Highlighted
Shopify Partner
9267 1180 3265

@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
1 Like
Highlighted
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

1 Like
Highlighted
Shopify Partner
9267 1180 3265

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
1 Like
Highlighted
Tourist
5 0 3

Both codes have resolved my problem. Thank you very much

1 Like
Highlighted
Shopify Partner
9267 1180 3265

@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