FROM CACHE - en_header

How to Bold Text in Turbo Mega Menu

blh76820
Tourist
10 0 3

Hi,  I have the Turbo theme from Out of the Sandbox. I am trying to figure out how to only bold the Menu titles in each column, and leave the sections under the menus normal text weight.

Example, hover your mouse over the main menu, on the menu item (Trending) should appear in bold, and then the style categories below it (Summer Fashion, Tie-Dye, Prints, etc) would be normal weight. Can anyone please assist? Thank you in advance. 

mega menu.PNG

Replies 15 (15)
dmwwebartisan
Shopify Partner
11014 2377 3400

@blh76820 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blh76820
Tourist
10 0 3
dmwwebartisan
Shopify Partner
11014 2377 3400

@blh76820 

Please add the following code at the bottom of your assets/styles.scss.liquid file.

 

#mobile_nav ul li a:hover, #nav ul li a:focus, #nav ul li a:hover, #nav ul li:focus a, #nav ul li:focus a.sub-menu--link, .slicknav_btn{
font-weight: bold !important;
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blh76820
Tourist
10 0 3

I added the code in assets/styles.scss.liquid at the bottom, but unfortunately it didn't change the text style to bold.

blh76820
Tourist
10 0 3

I added the code in assets/styles.scss.liquid at the bottom, but unfortunately it didn't change the text style to bold

dmwwebartisan
Shopify Partner
11014 2377 3400

@blh76820 

Can you try to add this again?

#mobile_nav ul li a:hover, #nav ul li a:focus, #nav ul li a:hover, #nav ul li:focus a, #nav ul li:focus a.sub-menu--link, .slicknav_btn{
font-weight: bold !important;
}

  

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blh76820
Tourist
10 0 3

Unfortunately that didn't work either. I did change the code a tiny bit when it didn't make any changes, and now the horizontal menu section bold when highlighted, but I'm needing the sections in the Mega Menu to be permanently bold. Here is the code so far, with the small changes I made. 

blh76820_0-1626929443981.png

 

dmwwebartisan
Shopify Partner
11014 2377 3400

@blh76820 

Please add the following code at the bottom of your assets/styles.scss.liquid file.

 #mobile_nav ul li a, #mobile_nav ul li a:active, #mobile_nav ul li a:visited, #nav ul li a, #nav ul li a:active, #nav ul li a:visited, .mobile_currency select, a.slicknav_btn {
    font-weight: bold !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blh76820
Tourist
10 0 3

That made everything bold in menu outside of the Mega Menu. I need the menu titles inside the mega menu bold, but not the menu items. 

dmwwebartisan
Shopify Partner
11014 2377 3400

@blh76820 

Please share screenshot what do you want!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blh76820
Tourist
10 0 3

blh76820_0-1626972658073.png

The items Highlighted are Menu Titles.  They need to be bold as compared to the non Highlighted items, which are Menu Items.  The information pulls from the Menu Navigation entered into the fields under each Column, Menu 1, Menu 2, etc.  (see below)

blh76820_1-1626972947232.png

 

 

blh76820
Tourist
10 0 3

Example of the look I'm trying to achieve:

blh76820_0-1626973031778.png

 

dmwwebartisan
Shopify Partner
11014 2377 3400

@blh76820 

This is some js and css customization work .Please share your theme zip file i will check code and provided solution to you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
blh76820
Tourist
10 0 3

I've emailed you the file as requested.

jelise33
New Member
1 0 0

I'm looking for the same solution to make the bold buy button on my Fashion related ecommerce website which I hosted on Shopify. Can you tell me any plugin or app to make the bold text?