[Resolved] Achieve same navigation bar

[Rohith]

How to achieve the same navigation bar as in this screenshot (Check PVT)

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohith]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohith]

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

[David]

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

What else you need help with ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohith]

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.

[Fernando]

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?

[Rohith]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Rohith]

Worked. Thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts