DEBUT Theme : change Navigation Menu Font

Sandra123
Excursionist
16 0 3

Hi there. Unfortunately none of the code snippets worked for me. I want to have the following navigation items in bold and preferably in a slightly bigger size:

Screen Shot 2020-07-09 at 09.45.33.png

 

Shop URL is: https://www.alfa24shop.de

Can somebody please help me with that?

Thanks a lot in advance

0 Likes

Hello @Sandra123 

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.h5 a.site-nav__dropdown-link.site-nav__dropdown-link--top-level {
    font-size: 1.4em;
    letter-spacing: 0.1em;
    font-weight: bold;
}

Hope this is helpful for you.

Thanks...

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Sandra123
Excursionist
16 0 3

Yes, it did! Thanks so much

0 Likes
GutterGuard
Tourist
5 0 2

Hi guys!

I could use a little help. I want to change my nav font to: Helvetica Neue, Upper-case, font weight 800 (ideally). I've tried the following code, but that doesn't change the font of the items with dropdowns. I'd also like to change the nav width so that they are all on the same line / row ideally (on most browsers). 

#SiteNav a {
font-family: "Helvetica Neue";
}
 
I've also made the order online a button with the following code, but I'd like to change the font colour to white (just for this button). Is that possible? 
.site-header nav ul.site-nav li:nth-child(6) {
background-color: hsl(7, 70%, 64%);
border-radius: 100px;
}
 
 

Site link: 

https://gutter-guard-direct-2u.myshopify.com

 

Thanks! 

0 Likes

Hello @GutterGuard 

Changes related to font family of nav paste following code :

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.site-nav .site-nav__label {
    font-family: Helvetica Neue !important;
}

Hope this will work for you

Thanks....

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
GutterGuard
Tourist
5 0 2

Thanks @oscprofessional that worked. 

I've also made the "order online" nav dropdown a button, but I'd like to change the font colour to white (just for this button). Is that possible? 

 

0 Likes

Hello GutterGuard,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.site-header nav ul.site-nav li:nth-child(7) .site-nav__label {
    color: white!important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
GutterGuard
Tourist
5 0 2
Thanks, that worked well. The only issue I’m facing now once you click
“Order Online” it has a dropdown menu, and all those items are now white
(ie invisible), is there a way to change font colour of the dropdown nav
items in the child 7 only?

Sorry to be a pain!
0 Likes

Hello GutterGuard,
Replace above code with

.site-header nav ul.site-nav li:nth-child(7) .site-nav__link--button .site-nav__label {
    color: white!important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
JenaSunn
Excursionist
30 0 10

Hi @oscprofessional, this code finally worked! Thanks so much!

 

.site-nav .site-nav__label {
font-family: Helvetica Neue !important;
}

0 Likes