Archived topic
2 Sides to the Header Widget
17 replies · Started by Amos on September 23, 2016
Hello!
IF my logo is in the center of the header. it is possible to create 2 header widget?
i want one widget (with icons) on the right and the second widget on left (phone number).
and why my logo move when i am using the header widget? (if the widget is in the left- the logo move right)
Hi there,
I'm afraid it's not possible to split the header widgets up like that.
However, you can achieve this using GP Hooks if you'd like.
You would first remove your logo and header widgets, then add this into the Before Header Content hook:
<div class="grid-33 header-left">
Left area content (phone number etc..)
</div>
<div class="grid-33 header-center">
<img src="URL TO YOUR LOGO" alt="" />
</div>
<div class="grid-33 header-right">
Right area content (icons etc..)
</div>
You can insert widgets into those areas with a shortcode if you use a plugin like this: https://en-ca.wordpress.org/plugins/widget-shortcode/
Hope this helps :)
Thank You Tom!
No problem! :)
I love GP ! Searched the forums this morning for this exact same question and POOF ... it was already answered a week ago !!! Thanks for asking it Amos and as always, thanks for everything Tom !
Glad it was helpful! :)
Anyway to do any of this without using short codes or CSS?
Most likely not as it involves changing the structure of the header so much.
It should be pretty straight forward if you follow the instructions above though :)
You would first remove your logo and header widgets, then add this into the Before Header Content hook:
Left area content (phone number etc..)
Right area content (icons etc..)You can insert widgets into those areas with a shortcode if you use a plugin like this: https://en-ca.wordpress.org/plugins/widget-shortcode/
This is perfect for what I need at this moment. Thanks, Tom! Brilliant.
After using this to put the logo in the middle, surrounded by two widgets, I then used the advice at https://generatepress.com/forums/topic/custom-header/#post-173767 to move them around on tablet and mobile, so the logo would be at the top, followed by the left widget, and then the right widget. Just had to swap out the class names for the ones used here (header-left, header-center, and header-right), and voilà. Perfection. Happy day.
Awesome! Glad the topic was helpful :)
hi
it doesnt work
any help... maybe something changed within time...?
hi
it doesnt work
any help… maybe something changed within time…?
Hi there,
Maybe this is what you are looking for?
https://docs.generatepress.com/article/split-header-three-sections/
If not please open a new topic.
Thanks!
all good
my bad....
it's working
i needed to press the Execute Shortcodes checkbox of the elements
thanks