Moving the Search Bar in the Misty Lake theme?

  • Author
    Posts
  • #1288639

    Right now I have the search box as a widget on my sidebar. I am using the Misty Lake theme.

    Is there a way to move it to the top right corner, above the header image?

    I have the custom design upgrade

    The blog I need help with is howardpublicschool.com.

    #1288801

    justpi
    Member

    There’s no need to do this via CSS editing: remove the search widget, then go to Appearance > Theme Options, uncheck the option “Yes, I’d like to hide the header search form”, click Save OPtions.

    #1288907

    Thank you so much for responding justpi.

    I have looked everywhere and I don’t see that check box or option anywhere. For sure is this an option with Misty Lake? Am I missing something?

    TIA

    #1288910

    justpi
    Member

    Sorry, I was thinking of Misty Look…
    Add this:

    #search-2 {
        background: none repeat scroll 0 0 transparent;
        position: absolute;
        right: -19px;
        top: -60px;
        z-index: 111;
    }

    #1288920

    Thanks again justpi. Much appreciated.

    I copied your code, as is, into the custom CSS area. It does create a search bar at the top, but it’s non-functional. It blinks repeatedly after the page is loaded and it is not possible to put any text into the box.

    Any other suggestions?

    #1288921

    justpi
    Member

    You’re welcome.
    I can see what’s happening: despite the z-index number I added, the widget is actually behind the menu area instead of in front of it. Add this, to limit the width of the menu (assuming you’re not going to add any other top level item):

    .main-navigation {
        width: 79%;
    }

    #1288923

    Yay! It works!
    Thanks so much for all of your help, it is so appreciated.

The topic ‘Moving the Search Bar in the Misty Lake theme?’ is closed to new replies.