Have your say in Community Polls: What was/is your greatest motivation to start your own business?

What CSS code changes the navigation font size in Pipeline theme?

What CSS code changes the navigation font size in Pipeline theme?

raider22
Tourist
4 0 2

Hi Everyone, 

 

I am trying to change the main navigation font size at the top for the Pipeline theme. What is the CSS code? 

Thanks, 

 

Replies 6 (6)

BrewBrains
Shopify Partner
160 26 33

Hi @raider22 ,

Could you please share your store URL, so that I can take a closer look at it?

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

raider22
Tourist
4 0 2
BrewBrains
Shopify Partner
160 26 33

Hi @raider22 ,

 

You can add code by following these steps

  1. Go to Online Store -> Theme -> Edit code.
    2. Open your theme.liquid file
  2. Paste the below code before </body> on theme.liquid

 

 

 

<style>
a.navlink.navlink--toplevel span, a.navlink span {
    font-size: 0.8rem !important;
}
</style>

 

 

 

I have slightly increased the font size. See screenshot for reference. If you want to change the size change the value 0.8rem. 

Screenshot 2024-03-23 at 12.46.35 AM.png

 

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

raider22
Tourist
4 0 2

Thanks for the response. It did change the size. However, it seems a bit odd around the s. I provided an image of what it looked like before we had to make the theme update. 


raider22_0-1711134325867.png

 

BrewBrains
Shopify Partner
160 26 33

@raider22 Can you try below code? Replace previous with the below code. 

Follow the step.

 

You can add code by following these steps

  1. Go to Online Store -> Theme -> Edit code.
    2. Open your theme.liquid file
  2. Paste the below code before </body> on theme.liquid

 

<style>
a.navlink.navlink--toplevel span, a.navlink   span {
    font-size: 0.8rem !important;
    font-weight:300 !important;
}

.menu__item a.navlink.navlink--toplevel span:hover, a.navlink.navlink--child span.navtext{
    font-weight: 600 !important;
}

</style>

 

 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Developer


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

raider22
Tourist
4 0 2

Thanks! I made some slight modifications, but it worked!