Dyad 2 – Adding a search bar to top of home page

  • Author
  • #3085497



    Is there any way at all to add a “Search” bar to the top of the home page in Dyad2? I am aware that we can place a Search Widget in the footer area (where Dyad 2’s widgets reside), but it’s critically important for us to be able to display a search bar “above the fold” of the website. It doesn’t even have to be in the header menu, though that would be ideal — even if it’s plastered over the homepage Header Image that would be ok. It’s imperative that visitors to our site are able to see a Search bar upon first opening our site; if it’s in the footer they have to click and scroll around to find it, which we want to avoid.

    I’m aware of a previous thread about this subject that concluded “well, it can’t be added to the header menu without a lot of trouble, sorry.” (Paraphrasing, of course!) I’m hoping there is *some* way to have a search bar appear on the top portion of the home page, even if it’s not in the header menu. Thank you very much for any help you can provide!

    The blog I need help with is todayincthistory.wordpress.com.

    The blog I need help with is cthistory.org.


    With the way that Dyad 2 html is done, we would have to reverse a lot of position declarations on parent elements, and when we do that, basically the footer and all the widgets would disappear from the screen entirely and getting them back into position, without the original position declarations would be a massive amount of work.

    I would suggest considering a different theme that has a search function in the header area, or an expandable search icon in the menu, such as Edin or Baskerville 2.



    Thank you for the informative reply.

    As a potential workaround, we are thinking of having a link in the header menu that says “Search” that links to a discrete page that contains a search box within the body of the page. Would this be possible to achieve with coding?



    Also, for another potential workaround:

    Would it be possible to ID the search widget in the footer with some kind of anchor tag, so when someone clicked “Search” in the header menu, the page would auto-scroll down to the [widget in the] footer area?

    Thank you so much for your time!


    The first would be more complex, but we can easily add a page jump using a custom link in your menu that goes to the search widget in the footer area. What you would do would be to add a custom link, set the label to Search or something like that, and then for the URL, use the unique widget id for the search widget like this.



    Thank you very much for the page jump information! I have two follow-up questions regarding the page jump:

    1) Will the #search-3 text work regardless of where the widget is in the footer (e.g. if I change the search widget location)?

    2) While the page jump does work, the page ID header menu (the darkened area at the top of the page that contains the page logo) overlaps the top of the widget area when someone clicks on the page jump link. Is there any way to insert a small amount of padding so there is no overlap when someone clicks on the page jump?

    Thank you so much for your help!


    The #search-3 is a unique ID for the search widget you put in the widget area, so it doesn’t matter which widget area it is in. If you delete that search widget and then add another, you would have to use the web inspector built into your browser and get the new ID for that search widget. Each time you delete one and add in another of the same, the widget id will change.

    There isn’t an easy way to adjust the page jump so that the widget is visible. One thought would be to add a title to the search widget, perhaps something like “Search Our Site” or something like that, and the title will then push the search box down a bit so that it is visible.

    You could try adding some padding to the top of the widget with the following, but it will space the widget down in the sidebar a bit and it will not be aligned with the top of the content to the left.

    #search-3 {
        padding-top: 50px;

    You can adjust the padding value as desired.



    Thank you very much! You’ve been incredibly helpful, both here and in other threads. I greatly appreciate it!


    You are welcome, and thanks.

The topic ‘Dyad 2 – Adding a search bar to top of home page’ is closed to new replies.