Viewing 4 replies - 1 through 4 (of 4 total)
  • Hey there Yazeed,

    Hope you’re well today 🙂

    For this you’ll have to make changes to your theme header.php. I’d suggest creating a child theme, then making a copy of header.php there and then making changes in your child theme. By doing this you’ll avoid your changes being lost once you update the theme.

    Once you do that you can replace code in header.php with the following one http://pastebin.com/7nNrr87i.

    What I did there was simply called get_search_form function and added a holder with specific class which we can later use to move it within the header.

    Please let me know when you do this so we can position it with some CSS.

    Best regards,
    Bojan

    Thread Starter yazooda

    (@yazooda)

    Hi dear Bojan :-), happy to see you again, I did what you said, big thanks 😀 but can you see how it does look now http://www.wecanboost.com , aligned to center and stuck on the top. I rely on you.

    Warmest regards,
    Yazeed.

    Hi Y

    I have seen this requirement quite lots of time and so have blogged about this for hiero theme. You can see the blog here.

    hope it helps!!

    Thanks

    Hey again Yazeed,

    Glad to see you again too 🙂

    Please try adding the following:

    @media screen and (min-width: 1024px) {
    header#masthead .clearfix.container {
        position: relative;
    }
    
    .headersearch {
        width: 33%;
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    .headersearch label {
        display: inline-block;
    }
    
    .headersearch input.search-field {
        margin-bottom: 0;
        padding: 10px;
    }
    }
    
    @media screen and (max-width: 1023px) {
    .headersearch {
        width: auto;
        height: auto;
        position: relative;
        padding: 20px 0 0 10px;
    }
    }

    This should be the result http://screencast.com/t/5xe2PiRO8VT0 🙂

    Best regards,
    Bojan

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to move Search Box to header?’ is closed to new replies.