[Resolved] Search bar moves Logo

[Santy]

I installed the search bar and it displaces the logo on the primary navigation bar. I am trying to move the search bar to the middle of the primary navigation between the logo and the shopping cart.

I installed this hook:

<form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<label>
<span class=”screen-reader-text”>Search for:</span>
<input type=”search” class=”search-field” placeholder=”Search…” value=”<?php echo get_search_query(); ?>” name=”s” />
</label>
<input type=”submit” class=”search-submit” value=”&#xf002″ />
</form>

and then set the css for the icon:

.main-navigation .search-submit {
font-family: GeneratePress;
}

which created the search bar but puts it next to the logo on the left side of the primary navigation bar and to the left side of the logo.

The header is being used as the Primary navigation.
How do I get the logo to remain in it’s default position and move the search bar to the middle?

https://rivervalleyhvac.com/wp-content/uploads/hvac-screenshot.png

[David]

Hi there,

can you temporarily remove your Coming Soon so i can take a look at the CSS required.

[Santy]

Hello the site is now live.

[Leo]

Give this CSS a shot:

.navigation-branding {
    order: -1;
    margin-right 0;
}
.main-navigation .search-form {
    margin-left: auto;
    margin-right: auto;
}

[Santy]

Thanks that worked great now I just need to add some css to move the search bar to the middle.

[Santy]

Thanks for the help. Definitely worth buying GP even if it’s just for the great support that’s provided by your team.

[Leo]

Try the edited CSS here:
https://generatepress.com/forums/topic/search-bar-moves-logo/#post-1269547

[Leo]

Looks like you’ve found a solution 🙂

[Author]

Posts