Search box in header is gone

windwhistle · Member · Mar 22, 2018 at 7:44 pm
Copy link

Add topic to favorites
I changed my header today, from text to an image (text with a transparent background), and just noticed the search window that used to be in the header on the right side no longer shows. When I tried cropping the image to a narrower measure to make room for the search window, the image expanded to fill the full width. How can I make the search window show without changing the current appearance of the header? (Maybe there’s some code to move it to the top layer or something, but I’m way too rusty with CSS to know how to do that. And I hate having to put in a search widget.)

The blog I need help with is: (visible only to logged in users)
joshron · Member · Mar 23, 2018 at 4:31 am
Copy link
Hi windwhistle,

The search bar appears when the website is viewed on mobile . On desktop, it applies margin-top: -54px.

You can try this CSS code and see if it works.
```
#masthead form.searchform {
    margin-top: 0px;
    float: right;
    position: relative;
}
```
Let me know how it goes.
Thanks!
windwhistle · Member · Mar 23, 2018 at 6:27 am
Copy link
Perfect. Thanks, joshron. I’d have never figured that out for myself.
joshron · Member · Mar 23, 2018 at 9:55 am
Copy link
That’s great to hear! Happy to help!
windwhistle · Member · Mar 23, 2018 at 4:35 pm
Copy link
Hmm, actually that’s not a perfect solution because it makes the header deeper/higher. Isn’t there a code that puts the item on top of all the other layers? I forget what it’s called.
windwhistle · Member · Mar 23, 2018 at 4:53 pm
Copy link
Played around with the code and got the result I wanted. (At least it looks good on my computer.) Thanks for getting me started in the right direction.
joshron · Member · Mar 25, 2018 at 2:10 pm
Copy link
Hi windwhistle,

It’s great that you got the result that you wanted on desktop. However, it’s not as responsive as the demo theme.

I’m tagging “modlook” to get a staff’s attention.

Just a thought for the theme developer as I believe it may help other users as well:
Is it possible to put the anchor tag, id=”header-image”, on top of form tag, class=”searchform”? In this way, the search textbox will be underneath the image log.

Let’s see how it goes :)
joshron · Member · Mar 25, 2018 at 2:10 pm
Copy link
Hi windwhistle,

It’s great that you got the result that you wanted on desktop. However, it’s not as responsive as the demo theme.

I’m tagging “modlook” to get a staff’s attention.

Just a thought for the theme developer as I believe it may help other users as well:
Is it possible to put the anchor tag, id=”header-image”, on top of form tag, class=”searchform”? In this way, the search textbox will be underneath the image log.

Let’s see how it goes :)
joshron · Member · Mar 25, 2018 at 2:11 pm
Copy link
image log

image logo I mean :)
windwhistle · Member · Mar 25, 2018 at 4:43 pm
Copy link
I’m pretty sure I’ve used the same header image before, or something similar, without the search form disappearing. In any case, I want to keep it aligned with the text and not add any more height to the header.

Frankly, I’d also like to eliminate the placeholder “Search” and the lighter background, and leave just the magnifying glass showing, but that’s a whole different issue.

Thanks again for your help.

No items found.