Debut Theme - Increase Font Size in Navigation

Solved
Highlighted
Tourist
10 0 1

Hello, I would like to increase the font size of my navigation menu. I am having a hard time trying to find the correct css to change the font size. 

1 Like
Highlighted
Shopify Partner
111 10 25

Add your store url so that we can take a look a it :) 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
Highlighted
Tourist
10 0 1

The website is protected right now, but here is an image http://prnt.sc/nmznti

 

I would increase the font size, without increasing the font size of the other headings. 

0 Likes
Highlighted
Shopify Partner
111 10 25

In order to review the class that controls the size of the font I need to be able to see the actual site, not a screenshot. Other than that it should be an easy fix, did you check the theme settings?

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
Highlighted
Shopify Partner
111 10 25

Assuming that you are using the same Debut theme I have on this video this is the solution: https://www.loom.com/share/904b5653a3bb42b993b31df3a98bb804 

 

From what I see, the menu font size is the same size as the body font size, the problem with this is that if you increase that font size it will affect not just the menu but also the body font. In order to work around this you need to create a new class and assign it to the menu items. 

 

For example, you can create a class titled .menu-links and assign the font-size you want to that class. Code below: 

 

.menu-link {
font-size: 22px; 
}

then add that class to your nav elements and this will create a separate set of rules for your menu items. Since I can't see your actual site I'm going by what the debut theme looks like on the Shopify store. Let me know if you get it. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
Highlighted
New Member
1 1 1

This is an accepted solution.

Hi,

I was able to add 

font-weight: 500;

as line 2466 in the  theme.scss.liquid file (under the Assets folder in Edit Code area of the Debut theme), and it worked for me.  You can adjust the font-weight to your liking, or change it to/add font-size: XXpx; or alter the nav CSS however you wish in that section --> ref to:

https://www.w3schools.com/css/ for options.

 

/*================ Site Nav Links ================*/
.site-nav__link {
  display: block;
  white-space: nowrap;
  font-weight: 500;

  .site-nav--centered & {
    padding-top: 0;
  }

--

font-weight.png

1 Like
Highlighted
Tourist
10 0 1

Thank you, this helped me!

0 Likes
Highlighted
New Member
2 0 0

Implemented the font-size change.  There was no font-size or font-weight line there.  So I added font-size: 24px;  And added a comment why:

 

/* change to the Nav Bar font size */ 

 

It worked great.  And of course showed up immediately after I saved. Thanks.  

0 Likes