Add image on mobile header

Hi Alfonso,

You'll have to switch to flexbox in order to use this hook.

Please refer to the hook's documentation page.
https://docs.generatepress.com/article/generate_menu_bar_items/

Hi there,

I've followed your steps but is still not displaying like i need:

https://snipboard.io/Jd39jI.jpg

and changing to Flexbox mi header in desktop mode now is displaying different

Hi there,

That could be fixed by increasing the "Priority" value in the Hook Element to something like 100. Then it will need a little CSS to hang over the menu.

What about your header changed?

Hi guys,

Good job, but, is not possible to place here?

https://snipboard.io/USv893.jpg

I've changed priority hook to 100.

My desktop header with Flexbox:

https://snipboard.io/qPDTW2.jpg

Header should be correct height and Navitagion menu should be centered :(

Hard to tell without being able to inspect it, unfortunately.

Let's try this hook instead: generate_after_mobile_menu_button

It will allow you to continue to use the Floats version. It will still need some CSS to display correctly - we'll need to see it on the page in order to provide that.

Hi Tom,

you can login at my staging website with admin credentials that i sharing you.

You will can check and inspect all

Any chance you can switch the hook to the one I mentioned above?

Thanks!

Hi Tom,

Now is on Floats version and generate_after_mobile_menu_button hook

With this settings the SVG image is not displaying

Sorry for the wait on this.

I went ahead and changed the hook to generate_after_mobile_header_menu_button as you're using the mobile header.

I also gave it a wrapper:

<div class="mobile-header-custom-image-container">
	your image HTML here
</div>

Now you should be able to add this CSS:

.mobile-header-custom-image-container {
    order: 4;
    position: relative;
    width: 100px;
    height: 60px;
    overflow: visible;
}

.mobile-header-custom-image-container img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

Hi Tom,

It took a while but we did it!! thank you very much!!! great job!!!

Congrats!!

Glad we got it working :)