How can I adjust the header size and features in the Debut theme?

Store Design
1

Hi!

I am trying to change the bottom size in the free Debut theme, now it looks like it is super huge (see photo).
Also i would like to remove the search icon so that you only see the shopping bag.

And i would love to have the header menu (rings,bracelets & cuffs, etc…) to be sticky, but this without the logo.

Screenshot 2021-05-27 at 10.46.14.jpg
Screenshot 2021-05-27 at 10.46.14.jpg1075×139 10.6 KB

If anyone could help i would be very grateful!

Kind regards,

Niels

2

@Descaux

Please share your web shop URL!

Thanks!

3

Hello, @Descaux

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

4

Sure! https://descauxe.myshopify.com/ pass : iaglea

5

Sure! https://descauxe.myshopify.com/ pass : iaglea :slightly_smiling_face:

6

Please Go to Online Store → Themes → Edit code → Assets → theme.css.liquid and paste this code at the end of this file.

.site-header__search-toggle {
    display: none !important;
}
.site-nav {
    padding-bottom: 0px !important;
    margin: 25px 0px 8px 0px !important;
}

#shopify-section-header {
position: sticky;
    top: 0px;
    z-index: 1000;
    background-color: #ffffff;
}
7

@Descaux

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 750px){
.site-header.logo--center { padding-top: 20px !important;}
.site-nav {margin: 10px 0; margin-top: 25px;}
.site-nav--centered { padding-bottom: 0px !important;}
.site-header__icon .icon-search {display: none !important;}
#shopify-section-header { position: sticky;top: 0px; z-index: 1000;background-color: #ffffff;}
}

Hope This work !

Thanks!

8

Hi Sir,

Unfortunately this didn’t made any change :disappointed_face:

9

@Descaux

Please check your CSS start end bracket some closing bracket is missing please check screenshot

2021-05-27_15-55_Descauxe.jpg
2021-05-27_15-55_Descauxe.jpg1600×900 118 KB

10

Can you check again? i removed it but it doesn’t seem to make any changes

11

remove this css class

.site-header { height: 50px;

and add new css class

@media only screen and (min-width: 750px){
.site-header.logo--center { padding-top: 20px !important;}
.site-nav {margin: 10px 0; margin-top: 25px;}
.site-nav--centered { padding-bottom: 0px !important;}
.site-header__icon .icon-search {display: none !important;}
#shopify-section-header { position: sticky;top: 0px; z-index: 1000;background-color: #ffffff;}
}
12

Thanks, is it also possible to get the top menu sticky?

1 Like
13

Please add this CSS for sticky menu

#shopify-section-header { position: sticky;top: 0px; z-index: 1000;background-color: #ffffff;}

Thanks!

14

Thanks! is it also possible without the logo?