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

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

mathieulenoir
Tourist
23 0 2

hi

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

 

mathieulenoir_1-1703642291677.png

 

Replies 6 (6)

SwiftPro-Danny
Shopify Partner
14 2 8

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
Tourist
23 0 2

hi Danny

I m using dawn theme

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

pw:#BEBEdragon23

SwiftPro-Danny
Shopify Partner
14 2 8

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.

SwiftProduction_0-1703643390585.png

 

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
Tourist
23 0 2

thank you so much for your help! fixed!

SwiftPro-Danny
Shopify Partner
14 2 8

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
Shopify Partner
10030 1998 2043

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>

Screenshot 2023-12-27 at 09.25.44.png

 

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.