How to change font weight only in submenu - Forum | JoomShaper
Solved Helix Framework

How to change font weight only in submenu

Asked by TomaszGrzechnik 1 year ago Last activity 1 year 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?

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
1 year ago

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

6 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
1 year ago

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

Paul Frankowski Senior Staff
1 year ago · edited
  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.

TomaszGrzechnik Asked this
1 year ago

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.

Paul Frankowski Senior Staff
1 year ago

Without URL hard to say more.

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

Log in to reply.