Changing navigation font in Broadcast theme

Solved
Highlighted
Tourist
5 0 1

When I make the font bigger for the rest of the site it looks great, but the nav looks too big, so need to decrease the font size.

Can't find a way to change the navigation font size without changing the font size for the entire theme. Looked in theme.scss.liquid but wasn't able to find anything similar to the solutions provided for other themes. 

 

 

1 Like
Highlighted

Hello JoshChu,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
5 0 1
Highlighted
Tourist
5 0 1
Highlighted

This is an accepted solution.

Hello JoshChu,
To decrease the navigation font size without changing the font size for the entire theme.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#NavMenus .site-nav.nav__links .nav-link {
    font-size: 12px;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
2229 483 626

Hey @JoshChu 

1. In your Shopify Admin go-to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or and paste this at the bottom of the file:

@media only screen and (min-width: 750px){
.main-menu>li>a {font-size: 23px;}
}

 

Hope this works for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes