Main Navigation Menu Font Size CSS

[Linford]

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

[Magnus_von_Brom]

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

Best,
Magnus

[Linford]

Hey Magnus, www.sockgameon.com

Theme Venture

Cheers 

[Magnus_von_Brom]

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]

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]

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]

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

[adam_wright]

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'

[Hana29]

Hi, I tried to edit code to change font size of navigation.

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

in theme.scss.liquid, but nothings changed.

I would really appreciate it if you could advice me as well.

Thanks

My page: https://bitejapan.sg

[StathisHotou]

Same problem with "Beyond" theme is there a way?

[KetanKumar]

@StathisHotou 

sorry for any issue please share store url

[Zworthkey]

@StathisHotou 
Share your store URL.

[Arash-faramarzi]

i have problem with debut theme , i want to change navigation font size , but i cant find any size font in css to increase it.

[KetanKumar]

@Arash-faramarzi 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Magnus_von_Brom]

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

[aaron258]

Hi 

Can someone help me with the same problem. I need my header to fit on 1 line instead of 2. I need help reducing my font size. 

My webpage is https://filler-pharm.myshopify.com/

[KetanKumar]

@aaron258 

sorry for that issue bt your store is password protect how can i check?

[aaron258]

https://filler-pharm.myshopify.com/

password: wiaffo

[aaron258]

I want it all to fit on 1 line instead of 2. I will also need space for 2 more categories to fit on the header

[KetanKumar]

@aaron258 

we are not able to password how can i do this

[aaron258]

try again i have just reopened it

[Zworthkey]

hii, @aaron258 
Paste this code on top of the style-desktop.scss file.

media="(min-width: 1261px)"
@media screen and (min-width: 78.8125em){
.grid-margin-x>.xlarge-6 {
    width: calc(63% - 1.875rem) !important;
}
.cell.small-12.medium-6.large-7.xlarge-6 {
    margin-left: -80px !important;
}
.cell.small-12.medium-3.large-3.xlarge-3.flex-container.align-middle.align-right {
    margin-top: -89px !important;
    margin-left: 75% !important;
}
}

Thank You.

[aaron258]

thank you very much. However it needs to be smaller as it is still on 2 lines. Please can we make it a lot smaller as i still need to add 2-3 more categories

[aaron258]

@Zworthkey 

[BlackArm]

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