How can I relocate the search and cart icon on Flex theme header?

Store Design
1

Hi there,

I was hoping to get the search and cart icon on the same row as the logo on my header on the flex theme

Website

password: iqs123

Screenshot 2022-07-21 at 10.09.28.png
Screenshot 2022-07-21 at 10.09.28.png2878×388 59.4 KB

Is there an easy way to do this?

Thanks so much!

2

@INFRA ,

div#shopify-section-header-centered {
    position: relative;
}
section.top-bar__content.is-flex.is-align-center.is-justify-space-between {
    position: absolute;
    text-align: ;
    z-index: 99;
    top: 3em;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid

1 Like
3

Thank you!

4

@oscprofessional Is there a way to get the text on the header images in separate paragraphs?

Below is the text split in 3 paragraphs

Screenshot 2022-07-21 at 10.25.46.png
Screenshot 2022-07-21 at 10.25.46.png558×518 44.4 KB

5

Hi this actually doesn’t work well, as the logo is not clickable anymore. Is it possible the remove the top bar and have the icons really on the same line as the logo?

6

Yes, you can remove items and move other ones. That’s the beauty of themes - you can edit the code to make the header (or any other element) appear exactly the way you want it to. You just need the skills to edit code. And that skill should be pretty high level as there’s a lot going on with the header (with responsiveness and JS) that you want it done right.

My recommendation. Pick the header style that gets you the closest possible to your desired layout. Then customize the code for that header style to get to your desired design.

For inspiration, here are a couple of customized Flex theme headers. Notice the always present search box - even on mobile.