[Rebalance Theme] How to add search to the header of the site?

  • Unknown's avatar
    iamsaijogeorge · Member ·

    i am looking to add search to the top part of the site but the theme only supports one widget in the footer. is there a way I can call the WordPress search text box towards the top of every page on the site?

    The blog I need help with is: (visible only to logged in users)

  • karenlattfield · Staff ·

    Hi there,

    There is a way that you can do this. What you can do is place a search widget in the footer widget area. You can then use Custom CSS to move the search text box to the top of every page. However, in order to use Custom CSS you need to be on at least the Premium plan.

    While the Rebalance theme only has one widget area in the footer, you can place several widgets in that one area if you want.

    Assuming you don’t place a social links menu in that top right corner of the page, you can absolutely position the search form into that location with the following code:

    @media screen and (min-width: 880px) {
.widget-area .widget_search {
position: absolute;
top: -240px;
right: 0;
}
}

    For mobile screens you’ll want to add the following CSS (to place the search bar directly under the menu button): 

    @media screen and (max-width: 879px) {
.widget-area .widget_search{
position: absolute;
top: 0;
right: 0;
}
}

    If you want to hide the search button, you could do this (not recommended for accessibility and not on smaller (mobile screens) either): 

    @media screen and (min-width: 880px) {
.widget_search .search-submit {
display: none;
}
}

    To move the content down in smaller screens so you can fit the search bar and button in: 

    @media screen and (max-width: 880px) {
#content .site-main {
padding-top: 140px;
}
}

    You can adjust the padding and position (top, right) values to suit. I hope this helps.

  • Unknown's avatar
    iamsaijogeorge · Member ·

    that is perfect, thank you.

  • karenlattfield · Staff ·

    You’re welcome, happy to help.

  • The topic ‘[Rebalance Theme] How to add search to the header of the site?’ is closed to new replies.