Search bar height dawn theme

Search bar height dawn theme

manbru
Tourist
19 0 3

Hello, 

 

I'm trying to get my search bar to look like the one in picture 2.  I've used the code in this post: Open search bar instead of icon in the header of dawn to get the search bar, but inside that code I can't find any way to adjust the height of the bar. 

 

Here's my store: https://r1vex.myshopify.com/

pass: 1

 

 

Thanks for the help!

 

 

currently 1:

1.png

 

2:

Untitled design (44).png

Replies 4 (4)

Moeed
Shopify Partner
4304 1105 1353

Hey @manbru 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
header.header.header--middle-left.header--mobile-center.page-width.drawer-menu.header--has-menu {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
</style>

RESULT:

Moeed_0-1719212282964.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Dan-From-Ryviu
Shopify Partner
8382 1650 1661

Hi @manbru 

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
@media (min-width: 990px) {
    .header-wrapper  .header {
        padding-top: 0;
        padding-bottom: 0;
    }
    .header-wrapper .desktop-search .field__input {
        height: 61px;
    }
    .header-wrapper .desktop-search .field:before,
    .header-wrapper .desktop-search .field:after {
        box-shadow: unset;
        border: unset;
    }
}
</style>

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

manbru
Tourist
19 0 3

Thank you! how do i make "sök" and the icon centred now?

 

Skärmavbild 2024-06-24 kl. 09.11.43.png

manbru
Tourist
19 0 3

I fixed it, if anyone want's the code here:

 

paste under <head> in theme.liquid

 

<style>
@media (min-width: 990px) {
.header-wrapper .header {
padding-top: 0;
padding-bottom: 0;
}
.header-wrapper .desktop-search .field__input {
height: 61px;
display: flex; /* Använder flexbox */
align-items: center; /* Centrerar innehållet vertikalt */
justify-content: center; /* Centrerar innehållet horisontellt */
position: relative; /* Ger oss positionell kontroll */
}
.header-wrapper .desktop-search .field__label {
position: absolute; /* Absolut positionering för labeln */
top: 50%; /* Placera labeln vertikalt mitt i fältet */
transform: translateY(-50%); /* Justera labeln tillbaka uppåt med hälften av sin egen höjd */

}
.header-wrapper .desktop-search .field__button {
position: absolute; /* Absolut positionering för knappen */
top: 50%; /* Placera knappen vertikalt mitt i fältet */
transform: translateY(-50%); /* Justera knappen tillbaka uppåt med hälften av sin egen höjd */
right: 10px; /* Justera knappen lite till höger */
}
.header-wrapper .desktop-search .field:before,
.header-wrapper .desktop-search .field:after {
box-shadow: unset;
border: unset;
}
}
</style>