DEBUT Theme : change Navigation Menu Font

Highlighted
Excursionist
15 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
Highlighted

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...

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
2 Likes
Highlighted
Excursionist
15 0 3

Yes, it did! Thanks so much

0 Likes
Highlighted
New Member
4 0 0

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
Highlighted

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....

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
New Member
4 0 0

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
Highlighted

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;
}
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
New Member
4 0 0
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
Highlighted

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;
}
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