Move Search to Tagline?

Start with:

.widget.widget_search {
position: relative;
top: -650px;
left: -40px;
z-index: 1000;
}

(If the Search widget is in the right sidebar, else adjust the top/left properties)

I think @nikeo is looking at adding more widgets, but this gives you a short-term solution.

This might be better:

.widget.widget_search {
position: absolute;
top: -660px;
left: -40px;
z-index: 1000;
}

Changing to absolute avoids leaving the space back in the sidebar where the Search Bar used to be.

Brilliant, Dave: thanks a million. I had to move the button separately to get it onto the same line as the text entry field:

/*  Move Search to Tagline void */
.widget.widget_search {
position: absolute;
top: -660px;
left: -40px;
z-index: 1000;
margin-left: 30px;
}
#searchsubmit {
position: absolute;
top: 25px;
left: 160px;
}

I got very confused because when I added this code to Custom CSS, the Search block disappeared north, way off the top of the page. I adjusted the top: value by a lot to bring it back into view – but when I output the page, it was nowhere to be seen. So I put your top: value back in and now it outputs in the right place – but is invisible in the CustomizIt editor window. Please tell me that’s normal and there is a perfectly rational explanation for it!

I should add that, for reasons I haven’t yet worked out, the new Search block only outputs on pages which have a framed Slider. It isn’t showing on my Home page, which has a full-width Slider, or on the Search Results page, or on any of the several other pages which don’t have a Slider. Why is that – and how can I make it global?

Finally, I am sad to report that the new location for my Search block doesn’t stop my Main Menu jumping up to top-right at extreme viewport widths (disappearing underneath the Search block). So I will either have to find a less busy place for the Search block or cure the Mexican jumping menu problem. (I wonder if I could fix it by resuscitating my Tagline and either colouring the text therein the same colour as the background, or entering just a spacer or   to populate it?

Please tell me that’s normal and there is a perfectly rational explanation for it!

It’s because I know better than you ?? It’s possibly a bug, I’ll flag it to Nic.

Still don’t have a link to look at?

But I’m a cheap scalp: most people know more than I do!

Sorry, no link yet. My site has 30 pages and I’m not halfway there yet. When you’re a methodical writer, editor, image mechanic, designer, builder, troubleshooter and nuclear scientist, nothing happens quickly.

I could send you a page if you would like to see my source code…or two pages – one with and one without my Search block.

And anyway, where’s the logic? To position something close to the top of the page should be -10px not -600px. Minus 600px from where?

OK, here’s a lesson for you!

Think about where the Search Bar is usually found – over in the Right Sidebar (for example). Now measure up from that position to the top of your screen et voila – should be about 600px! And it’s -600px because you’re travelling up from the Sidebar.

Now that explains position: relative (which you may already have known). Like you, I was expecting changing it to position:absolute to mean top:0px; left:0px to have been top left of screen. So my honest answer – I’m as mystified as you!

I read this

Well, top:0px takes it only to the top of the sidebar so that’s where it thinks the page ends. Strangely, top:autotakes it to a different, slightly lower position – aligned with the title of the first widget.

But this presumably is a clue to why my repositioned Search block is only showing on pages with a framed slider on — because the Slider pushes the top of the sidebar down, thus changing the Search block’s native position.

I can see why this might cause problems with :relative but the absolute position should be global (at 0px) once I find out how to point to the page rather than the sidebar.

Confusing though.

Changing it to position:fixed seems to have cured that problem – and also gives me the Search box on every page. No idea why :top doesn’t do it but eager to understand. My code is now:

/*  Move Search to Tagline void */
.widget.widget_search {
position: fixed;
top: 0;
right: 250px;
z-index: 1000;
}
#searchsubmit {
position: absolute;
top: 25px;
left: 160px;
}

Maybe the z-index: is superfluous with :fixed?

So, phew, thanks for your hand-holding again, Dave. Now on a mission to stop my Main Menu jumping on top of my new Search box.

Regrettably, unresolved again… Scrolling a page also scrolls my “fixed” Search box so that it obscures sidebar content.

Is there a way to add it to the Header? If not, how do I give it a top-of-the-page position which works on all pages?

Thanks for any help.

Do I need to use PHP to move my Search tool from the sidebar to the header? I found this advice somewhere but don’t want to try it if it won’t work with Customizr (obviously I’d need to find the right PHP files):

Copy all the search forms code from footer.php.
Then open header.php and find the following:
<div id=”navigation”>
After this you will see a

tag and then a lot of
• tags followed by the closing

tag. After this closing UL Tag paste your search code. Save and upload.

Alternatively, someone else was talking about creating a “wrapper” to include all the main page elements and then giving the Search tool a position:absolute should work. I’m not rushing into something I don’t understand but this was his suggested code:

#header {
    margin-top: 40px;
}
#menu {
    top: 492px;
}
#wrapper-content {
    margin-top: -436px;
    padding-top: 515px;
}
#content {
    position: static;
}
#search-5.widget {
    background: none !important;
    min-height: 20px;
    position: absolute;
    right: 175px;
    top: 10px;
}

Obviously this isn’t specific to my requirement but could it be adapted?

I’m more skilled with CSS than php. The php route is the most professional way, in my opinion.

Nic has mentioned about doing something
a) with the Search Bar
b) adding more widget areas

so it could be that something will happen in the core. I’ll try to find out more.

Hi, is there any update on this? I’d love to be able to do the same thing! Site I’m working on is here:
https://test.fertilitytreatment.ie/

Teri