[Resolved] Social icons in header?

[a1reno]

Hi,

I am trying to recreate the header that i had in elementor using only generatepress, however, I am not sure the best way to recreate the social icons i used to have in my header. Can you advise on the best way to achieve the same look as i had before?

https://cl.ly/b2fad6fb2771

Also the search box is slightly different. Is there a simple way to make it look how it was before? Currently I have the icon setting in gp set.

[David]

Hi there,

1. for the social icons you can use the Header Widget – to place a social icon widget or shortcode in that position.

2. In navigation search will take a little more effort.
2.1 First create a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Give it a title.
Add the following code to the content:

<form class="custom-search hide-on-mobile hide-on-tablet" role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ) ?>">
	<label>
		<span class="screen-reader-text"><?php _x( 'Search for:', 'label' )?></span>
		<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" />
	</label>
	<button type="submit" class="search-submit"><i class="fa fa-search"></i></button>
</form>

Select the inside_navigation hook
Check execute PHP
On Display Rules tab set the Location to entire site.

2.2 Add this CSS:

@media (min-width: 769px) {
    .inside-navigation {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
}

.custom-search {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.custom-search button {
    border-radius: 0 25px 25px 0;
    padding: 3px 20px 3px 15px;
}

.custom-search input[type="search"] {
    border-radius: 25px 0 0 25px;
    padding: 3px 15px;
}

[a1reno]

Hi David,

Thanks for the tips! I managed to get the social icons in by implementing an elemetor template in the header widget. I’ve taken a screenshot of the changes: https://cl.ly/7f10c5057147 (just in case the site doesn’t update for you)

The search box works too! the only problem is it looks a little too tall for the primary navigation. Is there a way to get it a bit thinner? Also is it possible to get a bit of a gap between the search box and the next heading (blog) next to it a bit like how i created it in the elementor header i used to use?

[David]

Cool – i edited the CSS above to adjust the height of the search. The last two rules in the padding property – the instances where you see 3px is what controls the height.

[a1reno]

Hi,

I placed the search bar into my header and it looks great! there are a couple of things that could use some correcting.

https://cl.ly/a52746e04ffd

1. The first thing is that the primary navigation has gotten a bit too tall now since the search bar went in. I’d like to keep it the same height it was before, i tried reducing the padding on the search bar but i couldn’t get it to look right. Is there a way to reduce the height of the search bar and thus the primary navigation?

2. Now that the search bar is working on desktop I only need the generatepress search function to show on mobile and tablet. How can i turn this off for desktop only?

Thanks!

[a1reno]

I marked this as resolved accidentally.

[David]

You can remove the search icon from the desktop nav bar with this CSS:

.main-navigation li.search-item {
    display: none !important;
}

That should resolve the height of the navigation as well.

[a1reno]

Hi,

Thanks for that! I managed to get the search box thinner by missing with the pixels and playing around with the menu height.

I thought when i put the code to make the search disappear it did, but for some reason its still there for me on desktop.

[David]

I edited the CSS above – so that should now work

[a1reno]

Thanks!

[David]

Glad to be of help

[Author]

Posts