Brooklyn Theme Mega Menu Font Size

Solved
Tourist
8 1 0

I am working with the Brooklyn theme and have added a Mega Menu.  What I notice is that the Heading font size for a section is very small and the items that are part of the heading use a font size that is much larger.  Is there a way to modify the font size and style for both?  I've looked at other post here and they discuss changing the following in theme.scss.liquid however this code is not in my theme.scss.liquid file.  

 

.site-nav__link {
  @include accentFontStack;
  @include transition(color 0.2s);
  font-size: em(10px);
.site-nav__dropdown-link {
  @include bodyFontItalic;
  display: block;
  white-space: nowrap;
  padding: 5px 15px;
  font-size: em(12px);

You can find a visual of what I am discussing at the link below under the "Shop" navigation item.  I've also added a screen shot.

 

Screen Shot 2020-02-28 at 10.57.31 AM.png

 

www.flocycling.com

 

Take care,

 

Jon

0 Likes
Highlighted

Success.

Shopify Partner
1200 162 325

You can add this to the bottom of your theme.scss.liquid file. Just adjust the values for what looks right to you:

 

a.MegaMenu__Title.Heading.Text--subdued.u-h7 {
    font-size: 1.5em;
}

li.Linklist__Item {
    font-size: 1.2em;
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
8 1 0

Brilliant.  Thanks so much!

0 Likes
Highlighted

Success.

Tourist
8 1 0

If I have other menus that are not mega menus how would I change the size of the font for these?  See the images below.  

 

I love this

 

Screen Shot 2020-02-28 at 12.43.58 PM.png

 

This is much too large.  

 

Screen Shot 2020-02-28 at 12.44.07 PM.png

0 Likes
Highlighted
Shopify Partner
1200 162 325
a.Link.Link--secondary {
    font-size: .8em;
}

Same place, bottom of theme.scss.liquid

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
8 1 0

Awesome!  Thank you!

0 Likes
Highlighted
Tourist
8 1 0

When I update this text it also changes the text in the Linklist__Item in the MegaMenu.  Is there a way to control each separately?

0 Likes
Highlighted

Success.

Shopify Partner
1200 162 325

Sorry try this instead:

 

.DropdownMenu a.Link.Link--secondary {
font-size: .8em;
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
Tourist
8 1 0

That did it!  Thanks!

0 Likes
Highlighted
Shopify Partner
1200 162 325

No problem, thanks for accepting the solution. Have a good one.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes