Archived topic
Insert image or buttons at right side of header
5 replies · Started by Sergio Miranda on March 22, 2022
Hello, good evening.
I would like your help to know how I could add a div block or an image to the right of the header, instead of the user and search icon.
I have managed to remove the user icon but not the magnifying glass.
In that position I want to add some images or blocks of text or buttons to be able to put notices, but I don't see how to do it.
I tried using the "hooks" but if I put an image, it goes above the header.
Can it be done?
Thank you very much
My test website is: https://chickenj.sybpruebas.com/contactanos/
<figure class="wp-block-image size-thumbnail is-style-default"><img src="https://chickenj.sybpruebas.com/wp-content/uploads/2022/02/cuarto-de-pollo-scaled2-150x150.jpg" alt="" class="wp-image-1281"/></figure>
Block element: hook
Hook name: wp_head
Priority: 11
Thanks
Hi Sergio,
Can you try hooking it to inside_navigation?
Then we’ll try to add some custom CSS to place it in the right location. We can also figure out how to place it on mobile if you prefer it as well afterwards.
With regards to the Search Icon, can you try disabling Navigation Search in Appearance > Customize > Layout > Primary Navigation?: https://share.getcloudapp.com/wbuzWmQZ
Kindly let us know how it goes. Hope to hear from you soon. :)
Hello Fernando, thank you. It worked !!
Now the image is inside the yellow block.
But I still don't know how to put it on the right side. For now, the image remains on the left side.
Hi Sergio,
Try this CSS:
.inside-navigation .wp-block-image {
order: 20;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Thank you very much, it worked!!!
No problem :)
