How to make the header sticky of my website and decrease the height of header?

Store Design
, , ,
1

I want to make header of my website sticky and decrease the height of it as well
https://swawe.store/

2

Hello @attackon

  1. To make your header sticky.

13.png
13.png1920×919 359 KB

  1. to decrease the height if header ( scroll below to the sticky header)

14.png
14.png1920×919 367 KB

If you find this helpful, please like and mark the job as completed.
Thanks

3

Hi, @attackon . You can follow these steps:

Step 1: Access the theme editing section

In the admin panel, select “Online Store” from the left navigation bar. In the “Themes” section, you’ll see your store’s current theme. Click the “Customize” button to open the customization interface.

Step 2: Open the theme source code editor

In the top right corner of the Customize page, you’ll see a button with a three-dot icon (⋮). Click on it. Select “Edit code” from the drop-down menu.

Step 3: Edit source code

The source code editor will open, allowing you to edit the theme files. Select the “base.css” or “theme.css” file and paste the CSS code below at the top:

.shopify-section.shopify-section-group-header-group.section-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

sticky-header header {
  padding-top: 0px !important; 
  padding-bottom: 0px !important;
}

Step 5: Save changes

Click the “Save” button in the top right corner to save your changes.

4

Hi @attackon ! Does the CSS I provided help your header bar stick to the top edge of the page frame? If it worked please choose my answer as the solution. Don’t hesitate to ask more questions.

Thank you very much.