CSS

I would like to add search form with a magnifying glass close the basket (top right side). I also wanted to add the social icons to the top left, as per the design. Would you be able to assist?

  • Luís
    • Support

    Hey Zena ,

    Hope you’re doing well since our live chat!

    After a further look, I think the best option would be create a child and then add the search form and the social icons directly in the theme template.

    Regarding to the search form, you would need to do something like:

    1) Firstly, start by creating a child theme, so you can modify it without losing the changes once you update it:

    https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme

    2) The template that is handling the header is called header-main-layout.php and can be found in wp-content/themes/astra/template-parts/header.

    Now, in order to override the default theme template, we need to copy that file from the parent theme folder (Astra) to the child theme folder and keep the same folder structure.

    So, you will need to create a folder inside the child theme called template-parts and then a subdirectory called header and copy the file to there.

    3) Now you can modify this file and add the search form using:

    <?php get_search_form(); ?>

    Add it right after the line that says:

    <?php astra_main_header_bar_top(); ?>

    4) This will call the default WordPress search form and then you can style it using CSS, to just display a “magnifying glass” icon:

    .site-header .search-form {
        position: relative;
        float:right;
    }
     
    .site-header .search-field {
      background-image: url("/wp-content/uploads/2019/09/search-icon-e1568911549146.png");
        background-color: transparent;
        background-position: 5px center;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        border: none;
        cursor: pointer;
        height: 37px;
        margin: 3px 0;
        padding: 0 0 0 34px;
        position: relative;
        -webkit-transition: width 400ms ease, background 400ms ease;
        transition: width 400ms ease, background 400ms ease;
        width: 0;
    }
    .site-header .search-field:focus {
        background-color: #fff;
        border: 2px solid #c3c0ab;
        cursor: text;
        outline: 0;
        width: 230px;
    }
    .search-form
    .search-submit { 
    display:none;
    }
    

    I took this CSS code from here and tested it : https://www.wpbeginner.com/wp-themes/how-to-add-a-search-toggle-effect-in-wordpress/

    Regarding to the social media icons, I may suggest you our Hustle:

    1) Install and activate our Hustle plugin;

    2) Then, go to Hustle -> Social Sharing and create a new Social Sharing

    3) In the Services tab, add the social media networks you wish (i.e Facebook, Twitter, etc);

    4) Then in the Display options tab, make sure you disable Floating Social and Shortcode is enabled.

    5) Copy the shortcode and add it to child theme template file you edited above (header-main-layout.php) using do_shortcode function, something like:

    <?php echo do_shortcode('[name_of_shortcode]'); ?>

    Add it right after the search form code.

    Note: You can also customize the social media icons on the Appearances tab of the Social sharing.

    I hope this information has been helpful. If I can help you in this or other related question, please let me know!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.