Change font size in site navigation for one list item (Debut theme)

Highlighted
New Member
3 0 0

How would you change the font size and emphasis for one list item in site navigation? I also need to keep the style applied regardless of screen width.

0 Likes
Shopify Expert
2123 354 445

Hi @GCT 

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

ul#SiteNav span { font-size: 10px; }
ul#SiteNav a{ font-size: 10px; }

Note: You can play with 10px

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
3 0 0

Bando Example.jpgBando site nav for mobile

Thank you! This does enable changing the font size for all of the list items in the site navigation.  But, I need to change only one of the list items.  Also, the change needs to work for mobile and tablet screen-widths. I'm attaching an example from www.bando.com. They have a link to a list item "Sale" in their site navigation that is styled differently from the other list items.

0 Likes
Shopify Expert
2123 354 445

Which menu list you want to change?

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
3 0 0

I would like to change an individual list item in the site-nav.

0 Likes
Shopify Expert
2123 354 445

If you want to add style to specific menu then you have to add condition in section->header.liquid and find <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}"> and add bellow in <a> in side this <li> tag like below:

 

{% if link.title =='Sale' %}sale_lbl{% endif%}

 

So, it look like bellow:

 <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
       <a href="{{ link.url }}" class="site-nav__link {% if link.title =='Sale' %}sale_lbl{% endif%}"{% if link.active %} aria-current="page"{% endif %}>
            {{ link.title }}
       </a>
</li>

Note: Change Sale to your menu name from {% if link.title =='Sale' %}

 

2. Add bellow css in Asset->theme.scss file

 

.sale_lbl{color:red;}

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes