How can I reduce the size of my navigation section using CSS?

mathieulenoir · ‎12-26-2023

hi

anyone could help me to decrease the size of my navigation section with css code:

SwiftPro-Danny · ‎12-26-2023

Hi Mathieulenoir,

What theme are you using? or can you share a link to your site so we can look at the code and tell you.

Regards

Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

mathieulenoir · ‎12-26-2023

hi Danny

I m using dawn theme

here is my store: https://labalisienne.com/

pw:#BEBEdragon23

SwiftPro-Danny · ‎12-26-2023

Hi Mathieulenoir,

First: Fix your code, this <h1> should NOT be where the navigation is (screen shot below). I would recommend you remove it and just place it below the banner or in the banner.

Secondly: to increase / decrease the height, in the screen shot you can see where the arrow is, just above it you have padding:2rem, if you increase the padding example 2.5rem it'll increase the height and vice-versa.

Regards

Danny

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

mathieulenoir · ‎12-26-2023

thank you so much for your help! fixed!

SwiftPro-Danny · ‎12-26-2023

Excellent, try and also move the <h1> issue outside of the navigation as well.

If my solution was helpful please Like & Mark as Accepted Solution - It helps us!
Swift Productions - Australia's Leading Shopify eCommerce Web Developer.

Dan-From-Ryviu · ‎12-26-2023

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code below under <head> element

<style>
.shopify-section-group-header-group .nav-header { margin: 0; }
.shopify-section-group-header-group > div { padding: 4px 0 !important; }
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How can I reduce the size of my navigation section using CSS?

How can I reduce the size of my navigation section using CSS?

Community Blog Articles