Horizon Theme (Header Menu)

Store Design
, , ,
1

Hello, i hope you are doing well.

I am currently working on a store using Horizon theme. I divided my navigation menu into LEVELS (1, 2 and 3).

Can someone help me how can i make Subcollections names bold (Bold font) ? . See LEVEL 2.

I attache here two captures :
Capture 1 : Navigation Menu. It shows a part of this menu on my store.
Capture 2 : Example. it shows an example of how i want my store looks like.

I think this required some programming skills, but i don’t know how exactly.

Best regards.

Example
Example370×197 8.14 KB

Navigation Menu
Navigation Menu639×527 28.7 KB

2

Hey @MEZ_MUS

You can either add this code in the Custom CSS option in the theme editor of Header section

a.mega-menu__link.mega-menu__link--parent {
    font-weight: bold !important;
}

OR

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
a.mega-menu__link.mega-menu__link--parent {
    font-weight: bold !important;
}
</style>

RESULT:

image
image985×233 8.35 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Thank you so much Moeed, i appreciate your help, it works as expected, thank you a lot :raising_hands: :folded_hands:

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

6

Hi Moeed, i hope you are doing well.
How can i do the same for mobile version ?

image
image572×910 38.9 KB

8

Thank you for your help, i appreciated that.

I add the code you give me, and it affects LEVEL 2 and also LEVEL 3.

I have some background on programming (industrial Programming), but not with HTML or CSS or on how the structure shoud be for CSS. That’s why i paste your code directly into DSS Section.

39709
397091080×1317 79.5 KB

39705
39705997×581 60.2 KB

10

Can someone help me for the mobile version ?

11

With some effort, The mobile version is working now as expected, thank you for your help