Re: Search bar height dawn theme

manbru · ‎06-24-2024

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:

2:

Moeed · ‎06-24-2024

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:

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 · ‎06-24-2024

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!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manbru · ‎06-24-2024

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

manbru · ‎06-24-2024

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

paste under <head> in theme.liquid

}
.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>

Re: Search bar height dawn theme

Search bar height dawn theme

Community Blog Articles