Making Navigation Header Smaller in Height

Carlos112
Visitor
2 0 0

Hi,

 

I am using the Symmetry theme for my website and have been trying to adjust the height/modify the padding of the navigation header so that it is smaller on desktop. Have tried multiple code methods so far but nothing has worked and the height of the navigation header doesn't change. I am using a sticky navigation if perhaps that affects the code. 

 

Can anyone please recommend a solution? I would greatly appreciate it. Thank you! 

Replies 3 (3)
PageFly-Oliver
Navigator
475 90 85

Hi @Carlos112 ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
@media(min-width:767px){
#shopify-section-header .navigation__item > a{ 
padding: 10px 18px
}
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Carlos112
Visitor
2 0 0

Hi! Thanks for your response. Unfortunately this did not work, it raised the navigation headers slightly but the logo and shopping cart icons did not move and the overall header size stayed the same. 

 

Do you have other options perhaps? Thank you for your comment and help! 

oscprofessional
Shopify Partner
15736 2353 3050

Hello @Carlos112 

Which theme yopu are using? could please share the store URL so that we can check and provide you with the proepr solution to you.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing