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 16 (16)

dmwwebartisan
Shopify Partner
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
blh76820
Tourist
10 0 3
dmwwebartisan
Shopify Partner
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
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
12280 2546 3693

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
blh76820
Tourist
10 0 3

I've emailed you the file as requested.

yalostore
Excursionist
34 0 8

Im having the same problem as her!!! The menu outside of the mega 

menu (home, collection, gift cards, ...) is bold and i just want the mega menu tittles to be like that (accesories, bottoms, dresses, ...)

Could you help me please? 

 Screenshot 2023-09-13 192900.png

jelise33
Visitor
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?