Debut Theme - Changing Menu Font Size

Highlighted
Tourist
5 0 2

Hi Shopifyers,

I'm currently using the Debut theme and wish to increase the text size of the main menu in the header bar. I can do this via the typography settings however its size is currently linked to the main body text, so an increase in one affects the other. Further, I'd love to be able to make the menu text bold.

Any help would be greatly appreciated.

1 Like
Highlighted
Shopify Staff
Shopify Staff
100 0 16

Hey there Seton!

The best way to change that section's font size only would be to make some changes to your theme's stylesheet - this way you can narrow down more specific areas without affecting the rest of the body. 

Go to your Admin->Online Store->Themes area, click the '...' icon, and go to Edit HTML/CSS.

Once you're there, go to Assets on the left, select theme.scss.liquid and scroll all the way down to the bottom, where you can add this piece of code:

.site-nav {
  font-size: 25px;
  font-weight: bold;
}

25px is just a starting point - from there you can tweak the sizing and see what works best :).

If you have any questions, give me a shout!

Cynn | Guru @ Shopify

2 Likes
Highlighted
Tourist
5 0 2

Hey Cynthia! 

I'm currently trying to work on the same thing and I can't for the life of me figure out how to change the type sizes here. I put this code in but it doesn't change the type on the drop down menu at all. I'm using Debut Theme. 

Any and all help will be greatly appreciated! 

0 Likes
Highlighted
Excursionist
24 0 4

I actualy have the same question. I found that section but I don't have the "font-size:" there. I have been trying to tweak all of our font sizing and have gone through the whole code and tweaked sizing everywhere I see a __px or rem and nothing seems to change on the site. For reference my section looks like this

/*================ #Site Nav and Dropdowns ================*/
.site-header__logo {
    img {
    display: block;
    }
}

.site-nav {
    position: relative;
    padding: 0;
    text-align: center;
    margin: 25px 0;

    a {
    padding: 3px 10px;
    }

    li {
    display: inline-block;
    }
}

.site-nav--centered {
    padding-bottom: $gutter-site-mobile;

0 Likes
Highlighted
Tourist
4 0 1

Yeah, this advice is not accurate as I have attempted to use the same code and it did not do anything.  Not sure why the Shopify employee would say this.

If anyone else knows truly how to do this, can you help?

 

Thanks,

0 Likes
Highlighted
Shopify Partner
2 0 0

Hey guys,

I had the same problem so I did some digging in the header.liquid to see if .site-nav class actually existed - which it doesn't.

Instead I discovered that it's actually .site-header, so if anyone wants to edit the font size of the nav, simply use the following:

.site-header { 
    font-size: 25px; 
    font-weight: bold; 
    }

 

0 Likes
New Member
1 0 2

To all,

Under Assets folder in the theme.scss.liquid file.

( if you have nested menus )

Line 2486  you should see 

.site-nav__link--button {
  border: none;
  background-color: transparent;
  padding: 3px 30px;

Just add  ( font-size: 24px; ) on line 2490 is should look like this. 

 .site-nav__link--button {
  border: none;
  background-color: transparent;
  padding: 3px 30px;
  font-size: 24px;

 

2 Likes
Highlighted
Tourist
7 0 1

@Mark_Lester 
wroteTo all,

Under Assets folder in the theme.scss.liquid file.

( if you have nested menus )

Line 2486  you should see 

.site-nav__link--button {
  border: none;
  background-color: transparent;
  padding: 3px 30px;

Just add  ( font-size: 24px; ) on line 2490 is should look like this. 

 .site-nav__link--button {
  border: none;
  background-color: transparent;
  padding: 3px 30px;
  font-size: 24px;

 


I do have nested menus and this worked for the first menu but not the rest.  My menus are laid out across the header reading "Home" "Clothing" "Everything else" and only the "Home" menu changed font size.  Any suggestions on how to change the other 2?

 

Thanks for your help.

1 Like
Highlighted
Shopify Expert
1151 57 343

Mark_Lester it worked - thanks a bunch :)

Learn how to run insanely profitable online store from day #1 | Join the Masterclass: http://www.rockpapercopy.com/shopify-masterclass/

0 Likes
Highlighted
Shopify Partner
7 0 0

Thank you! that worked... but I have a drop down in my menu and it did not change the size of it... what code to add to make the drop down font same as the other items in the menu?

SEO Expert Custom Web Design Growth Marketing 775-870-0488
0 Likes