Providence Theme Menu Bar Adjustments

[JustinVTTS]

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.

[KetanKumar]

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.

[JustinVTTS]

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

[KetanKumar]

@JustinVTTS 

Thanks for store URL.

sorry your store is password protect can you please share us

[JustinVTTS]

vtts123 is the password, thanks.

[KetanKumar]

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

[JustinVTTS]

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.

[KetanKumar · 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);
}

[JustinVTTS]

Both codes have resolved my problem. Thank you very much

[KetanKumar]

@JustinVTTS 

Thanks for update and support.