[Resolved] How to move text widget below the Search bar widget in the Header?

[bluebit]

I have currently two widgets in the header widget area, a search bar widget and a text widget. I would like to move the text widget below the search bar in the header, how do I do this with css?

My current Custom CSS code:

.inside-header {
position: relative;
}

.header-widget {
position: absolute;
bottom: 37px;
left: 15%;
}

.site-header input[type=”search”] {
box-sizing: content-box;
width: 710px;
}

.header-widget .widget {
display: inline-block;
vertical-align: top;
}

[Leo]

Hi there,

I think the easiest option should be to add a search and paragraph block with a block element hook:
https://wordpress.org/support/article/search-block/
https://docs.generatepress.com/article/block-element-hook/

The after_header hook should work.

Let me know 🙂

[bluebit]

I feel more comfortable with using WordPress without blocks, what´s the css code to move the second header widget below the first?

[Leo]

The current structure is just incorrect and difficult to configure – header widgets designed to be on the right of the logo/menu and not below.

You can also use a hook element with and call the search field using this:
<?php get_search_form(); ?>

[bluebit]

Alright, check out my site now, I managed to hook a text widget below the header, now the sides of the widget need to be contained, how to do this?

[Leo]

Hmm since you are using a page builder, I’d assume it has an option that lets you set the width?

[bluebit]

Yea, page builder lets you use add CSS classes, but I don´t know how to use it. Also I tried to make it fit see site again but when its responsive the sides dont stick to the header or body, is there a way to say max width 1200px?

[bluebit]

I found in a section where i can put in CSS declarations and I put:

max-width: 1200px

now I have to center it.

[Leo]

So is it all working now?

I cannot provide support for page builders as I’ve never used them before.

[bluebit]

yep, i found another way to get it to work 🙂

[Leo]

Glad to hear 🙂

[Author]

Posts