[Resolved] Social icons in header?

Home Forums Support [Resolved] Social icons in header?

Home Forums Support Social icons in header?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #893830
    kiant123

    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.

    #893906
    David
    Staff
    Customer Support

    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;
    }
    #893952
    kiant123

    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?

    #894006
    David
    Staff
    Customer Support

    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.

    #895962
    kiant123

    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!

    #895963
    kiant123

    I marked this as resolved accidentally.

    #896016
    David
    Staff
    Customer Support

    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.

    #896040
    kiant123

    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.

    #896042
    David
    Staff
    Customer Support

    I edited the CSS above – so that should now work

    #896050
    kiant123

    Thanks!

    #897137
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.