How To Change Font Weight Only In Submenu - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

How To Change Font Weight Only In Submenu

TomaszGrzechnik

TomaszGrzechnik

Helix Framework 5 months ago

Hi, I need to change font-weight only in submenu. I try use your suggestion in Customization Tips for Helix Template:

  1. In Typography I add new font in custom field, I set Weight to Light and add in Custom selectors: .sp-megamenu-parent .sp-mega-group > li > a

It doesn't work :(

  1. Second suggestion, to add in custom css: .sp-megamenu-parent .sp-mega-group > li > a {font-size: 16px; }

But I need only change font-weight, and add code: .sp-megamenu-parent .sp-mega-group > li > a {font-weight: 200; }

It doesn't work too. Where is mistake?

0
7 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 months ago #191978

What can I say, human mistake, you set font-weight 2x, ones as !important, that's why with hover you had to use !important again.

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-weight: 300 !important;
}

Please mark topic as solved. Thx

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 5 months ago #191914

Hi there!

Thanks for reaching out.

Are you using the raw Helix Ultimate? Then the following code should work:

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
    font-weight: 200;
}

Otherwise kindy share your admin access to check it for you.

Best Regards

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 months ago #191919
  1. Remember that used by you font - may not have a thin version. And between 200, 300 and 400 there is no visual difference.
  2. Or you used module inside menu item, that have different class name.

Alternative CSS

#sp-menu .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {font-weight: 300;}

Share URL - it's always better to talk.

0
TomaszGrzechnik
TomaszGrzechnik
Accepted Answer
5 months ago #191970

Thanks for help, But I don't know why but I must add !important on the end:

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a{ font-weight: 300 !important ; }

Do you know why?

Without this is doesn't work.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 5 months ago #191972

Without URL hard to say more.

As you could see I shared CSS with "#sp-menu" that is stronger that typical class names.

0
TomaszGrzechnik
TomaszGrzechnik
Accepted Answer
5 months ago #191977

Oh sorry Paul, here is the link: https://poradnia-zdrowia-psychicznego.pl

For a:hover I set font-weight: 500

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 5 months ago #192082

Hi TomaszGrzechnik,

Did the suggestions help?

Hope you are aware of where to place code snippets. Here is the documentation link again if needed:

https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best regards,

0