Need help? Check out our Support site, then


Moving the Search Bar in the Misty Lake theme?

  1. 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.

  2. 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.

  3. 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

  4. 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;
    }
  5. 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?

  6. 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%;
    }
  7. Yay! It works!
    Thanks so much for all of your help, it is so appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic