How to replicate this header?

Hi Juned,

1. Go to customizer > layout > primary navigation, set the navigation location to below header.

2. Go to appearance > elements, create a new block element, add 2 buttons into the element, set hookas the element type, choose after_header_content as the hook, and setentire site as the location.

3. Create another new block element, add a search block into the element, set hookas the element type, choose menu_bar_items as the hook, and setentire site as the location.

4. Add this CSS:

.inside-header {
    justify-content: space-between;
}

Once these steps are done, we can go from there for the mobile layout.

Thanks Ying.

I have implemented as per your above points. Kindly proceed further.

The 2 button blocks can be added to one buttonsblock, it will be easier to adjust the layout.

Can you change that?

Done.

For the header part, you'll need to re-style the button for mobile, less padding, smaller font size, etc.

@media (max-width: 768px) {
    .inside-header.grid-container {
        flex-direction: row;
    }
    .gb-button-wrapper.gb-button-wrapper-1ed5f52b {
        flex-wrap: nowrap;
    }
}

For the navigation part, what kind of layout are you looking for regarding the cart icon?

"For the header part, you’ll need to re-style the button for mobile, less padding, smaller font size, etc."

>> Done

"CSS"

>> Done.

"For the navigation part, what kind of layout are you looking for regarding the cart icon?"

>> Note understood. Kindly explain.

“For the navigation part, what kind of layout are you looking for regarding the cart icon?”

>> I am okay with what is now having at my staging site. Only problem is the search is showing in smaller size, and not in full width.

Regarding cart ion at header, when I am adding any product (Add to Basket), then the qty number is going in second row in header icon (desktop and mobile both). Please look into that.

Try add this:

@media (max-width: 768px) {
    .menu-bar-items {
        flex: 1;
    }
}

Still, its in 02 row. Both at desktop and mobile.

I have added both the above css. Should I try it with only with this last css?

It looks exactly what you were asking for, isn't this what you see?
https://www.screencast.com/t/Yj2vvjrrKeJu

Yeah, but when you add any item to the cart, then the cart qty is going in second row.

Please check this screenshot. Qty is in 2nd row in Header.