Prestige Theme – Change font of main header link only, not mega menu content

Store Design
,

Topic summary

A user working with the Prestige theme needs to style only the top-level navigation links without affecting the h6 headings inside the mega menu dropdown.

Problem: Current CSS selector targets both main header links and mega menu content simultaneously.

Solutions provided:

  1. Child selector approach - Use .header__primary-nav > .header__primary-nav-item > .h6 to target only direct children
  2. :not() pseudo-class - Use .header__primary-nav-item:not(.mega-menu) > .h6 to exclude mega menu elements (requires replacing .mega-menu with actual class name)

Both methods apply the same styling:

  • Font: freight-text-pro
  • No text transform
  • Zero letter spacing
  • 17px font size

Resolution: The user confirmed one of the solutions worked successfully.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to style only the main level navigation links on my site, but every selector I can find that works also changes the .h6 heading inside of the mega menu as well. How can I target ONLY the top header links and not the content of the mega menu?

Link to store: https://asteriastudio.com/

Current CSS:

.header__primary-nav-item .h6 {
  font-family: "freight-text-pro";
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
}

Screenshot 2023-11-18 at 11.09.01 AM.jpg
Screenshot 2023-11-18 at 11.09.01 AM.jpg3584×1054 134 KB

2

Here are a few ways you could try to target only the top header links:

  1. Using Child (‘>’) Selector:
.header__primary-nav > .header__primary-nav-item > .h6 {
  font-family: "freight-text-pro";
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
}
​
  1. Using ‘:not()’ Selector to Exclude Mega Menu Links:
.header__primary-nav-item:not(.mega-menu) > .h6 {
  font-family: "freight-text-pro";
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
}

Replace ‘.mega-menu’ with the actual class of your mega menu if it’s different.

I hope it helped you!

3

Thanks so much, that worked!

1 Like