[Resolved] header widgets (left, centre, right)

[orlando britain]

Hi Tom,
I want to place 3 widgets in the header. 1 float left (logo), 1 centered (search box) and 1 floating right (opening hours text) as can be seen on our website: http://datastores.co.uk/

I am currently achieving the desired affect by using 3 DIVs in the ‘Before Header’ GP Hooks Section containing code although I would much prefer to use widgets as they are easier to manage/edit.

If I place 3 widgets in the header area, I can get them to align (not be on top of each other) by using CSS I found elsewhere on this forum (pasted below) But they are all floated left… How can I get each widget to float in the correct location??

Many Thanks!

.header-widget {
float: left;
max-width: 100%;
}

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

[Roberto Enrique]

Using this plugin you can use widgets instead:
https://wordpress.org/plugins/widget-shortcode/

And keep using the “before header” hook like this:

<div class="grid-33 tablet-grid-33">
[widget id="widget-1"]
</div>
<div class="grid-33 tablet-grid-33">
[widget id="widget-2"]
</div>
<div class="grid-33 tablet-grid-33">
[widget id="widget-3"]
</div>

And they should collapse automatically as expected.

If I’m not wrong, every widget should have a unique class applied to them automatically so you can target your contents as you need but if you need more granular control you can also use something like:
https://wordpress.org/plugins/widget-css-classes/

[orlando britain]

Hi Roberto, many thanks for the link.

I have installed the plugin and set up 3 widget areas and it’s nearly there.

when I use your code [widget id=”widget-1″] in GP Hooks, it just shows the text – [widget id=”widget-1″].
If I use the short code – [cwa id=’widget-2′] it does output the Widgets (left, centre. right) as a styled list (bullet points).

is it just case of using more css to get rid of the bullet points and to be contained within the container not the full page width.
thanks,
orlando

[Leo]

I think Roberto’s [widget id=”widget-1″] it’s just an example. You would need to grab the actual shortcode from the plugin.

Not sure what you mean by the bullet points and the container width. Can you link us to your site?

[orlando britain]

beside each widget was a bullet point which I removed using this CSS: list-style: none;

all sorted. thanks 🙂

[Leo]

Glad we could help!

[Luizik]

You can also use positioning and float:

.site-branding{
    position: absolute;
    left: 0;
    right: 0;
}
.header-widget {
    width: 100%;
	max-width: 100%;
}
#custom_html-2{
	float: left;
}
#custom_html-3{
	float: right;
}

[Author]

Posts