Achieve same navigation bar

Hi there,

you can add your search and your social icons blocks to a the Header Widget in Appearance > Widgets

Hello, I have added it as a widget but it is showing in different location. (Check PVT)

1. Disable the Navigation as Header option in Customizer > Layout > Header.
2. Set the Customizer > Layout > Primary Nav -> Location to: Float Right.
3. Add your widgets to the Header Widget ( NOT the Top Bar ).

The search bar is showing good but it is not looking same as in the target website. How to achieve it?

You can adjust the secondary navigation height in>> Customizer > Layout > Secondary Navigation --> Menu Item Height.

What else you need help with ?

The thing is not about secondary navigation. The search box should be in the center and the size and style should be the same. Please help me with this.

Hi Rohith,

Will you be add Social icons as well? Can you try adding them first, and then we'll fix the other stuff afterwards?

I have added the icons but they are not showing properly. Please check mine and target website.

Add this CSS:

.header-widget {
    display: flex;
    align-items: center;
    flex: 1;
}
.header-widget aside:first-child {
    flex: 1;
    margin-right: 40px;
}
.header-widget aside ul li {
    margin-bottom: 0;
}
.header-widget .wp-block-search input,
.header-widget .wp-block-search__button.has-icon {
    border: 0;
}
.header-widget .wp-block-search input {
    border-radius: 6px 0 0 6px;
    overflow: hidden;
}
.header-widget .wp-block-search__button.has-icon {
    margin-left: 0;
    border-radius: 0 6px 6px 0;
}

Worked. Thank you!

You're welcome