Support » Themes and Templates » Dyad » Search at site header

  • Hello,
    Can someone please help me how to put the search widget into the header? For now I can only place it in footer area.
    Thanks a lot,
    Loukia

Viewing 2 replies - 1 through 2 (of 2 total)
  • Chad

    (@shireling)


    Hi @loukaid!

    Adding a search form at the top of Dyad will require a bit of customization – and you may find it leaves the header feeling a bit cramped, since the site title and menu already share that space.

    If you want to try it out, you’ll first need to set up a child theme.

    In your child theme folder, make a copy of header.php.

    In your copy, on or around line 47, find the end of the navigation block, which will look like this: </nav>.

    Just below that, before </header> try adding the following:

    <div class="search-wrap"><?php get_search_form();?></div>

    That will place a search from to the right of your navigation menu.

    You’ll also want to use some CSS for spacing, width, color and alignment:

    .search-wrap {
    	margin-left: 15px;
    	width: 295px;
    	color: #6a6c6e
    }
    
    @media screen and (max-width: 960px) {
      .search-wrap {
    		margin: 0 auto;
    		padding-bottom: 10px;
    	}
    }

    That’s set up so the search gets centered on smaller screens when the menu switches to toggle mode.

    You can add that CSS in your child theme’s style.css file, or you can use the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module.

    Let me know how it goes!

    Thank you for all the information. I’ll try it and let you know how it goes!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.