Main Navigation Menu Font Size CSS

Linford
Tourist
6 0 2

Hi

Im trying to change just the font size of my main navigation menu at the top of my website. ive found the section of code i need to edit in the inspect element section but when i head over to change it in the shopify theme code editing tool i cant find the section i need to change in the theme.scss.liquid.

If anyone knows how i can change this i would appriciate it very much! Thank You

Lin

Replies 24 (24)
Magnus_von_Brom
Shopify Partner
22 0 3

Lin,
do you have a link to the site and which theme are you using?

Best,
Magnus

Linford
Tourist
6 0 2

Hey Magnus, www.sockgameon.com

Theme Venture

Cheers 

Magnus_von_Brom
Shopify Partner
22 0 3

Hi Lin

Thanks. I downloaded the Venture theme and have three suggestions (and I appologize if you have already tried this):

It seems that it should be possible to change the Nav font size from Admin -> Customize theme. Click on "Theme settings" in top left, and then "Typography". The settings for font size in the menu is at the bottom. I did a quick test and it's working.

That setting also seems to change the text size on the buttons (?). If you don't want to do that, try to change the code here (line #161 in theme.scss.liquid)

@mixin nav-text-style() {
  font-size: $font-size-nav; // Change this to for example 16px
  font-weight: $font-weight-body-bold;
  @if $type-nav-spacing {
    letter-spacing: 0.6px;
  }
  @if $type-nav-transform {
    text-transform: uppercase;
  }
}

I'm not sure this answer will help you - I'm pretty new at theming Shopify.

Best, Magnus

Linford
Tourist
6 0 2

Hey Magnus 

My text was already on the lowest possible setting in the typography section.

Followed your steps to change the code and it worked perfectly!!!!

Really appriciate you taking the time to look into this for me.

Thanks alot

Lin

Albert_Colomina
New Member
5 0 0

Hello Magnus,

I have the same problem here but I use Brooklyn theme.

My objective is to be able to deliver a higher number of options in the top menu but as soon as I add more than 5, the CSS file makes the main menu become dropdown menu rather than horizontal.

www.proudfreak.com

I would like to check 2 things:

  1. If I can get the full menu I want by reducing the font-size
  2. If I can make the grid-wrapper become more tolerant with the size of the menu (only becoming dropdown when using phone)

Thank you in advanced for your help!

AC

Albert_Colomina
New Member
5 0 0

I could find an answer to my previous question investigating a bit more. 

I'll place my solution below just in case someone faces the same problem.

To reduce the size of the Navigation Menu in Brooklyn theme you need to modify your CSS file.

  • Go to Online Store >> Themes >> Actions >> Edit Code

On the left side bar:

  • Look for Assets >> Theme.SCSS.liquid

You will find the CSS code to modify the text in the Nav Menu around the line 2.738

Look for:

.site-nav__link {
  @include accentFontStack;
  @include transition(color 0.2s);
  font-size: em(10px);

you will be able to change the "font-size" I put 10px as you can see

Then, the dropdown will look too big. A bit later, in the same theme.scss.liquid you will find this piece of code:

.site-nav__dropdown-link {
  @include bodyFontItalic;
  display: block;
  white-space: nowrap;
  padding: 5px 15px;
  font-size: em(12px);

You can also change the font-size here.

 

Hope it helps and saves you time! :)

Best,

Albert

Magnus_von_Brom
Shopify Partner
22 0 3

Hi Albert

Sorry for a late respons – but I'm glad you sorted it out.

I have some input/opinion. I think the size of the menu text is to small at 10px. Especially when the image background is lighter. At least 12-14px is good for my old eys ;)

But as you already have found out, there is no easy fix for this. On a desktop size, the logo takes one third ("large--one-third") and the menu two thirds ("large--two-thirds"). So, to have a larger text size in the menu, there are a other ways (but none are quick and can have drawbacks for other element/pages).

A. Change the max-width of the div with class "wrapper". This is the variable "$siteWidth" on line #289 in timber.scss.liquid. Test with 1100px. To try this, first change back the font size, then make the change on line #289 in small steps. Reload the page and see what works for you.

B. Rewrite the code for the site header. This can be a lot – both the template and the css have to be updated with new classes. In short, creating a second "wrapper" for just the site header and set a new siteWidth on only that one. This way, you can let the site header be wider then the "wrapper".

Sorry for not offering a perfect and easy solution :(

Best, Magnus

BlackArm
New Member
1 0 0

Actually I find in

frame.scss.liquid

Just press control F. than find this line

.site-nav > li > a { font-size:32px;font-weight:normal;letter-spacing:0.5px;padding

just change 32 px

 

That's all

adam_wright
Shopify Partner
2 0 2

Hey just looking over your notes and I couldn't find what you shared for im using a different theme that's probably why. I do wish to change our mobile drop down size smaller on the theme only allows 14px I check out the theme code files and couldt find it, would you mind taking a look please the them is 'Venture'