[Resolved] Add image on mobile header

[Elvin]

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/

[Alfonso]

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

[Tom]

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?

[Alfonso]

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 🙁

[Tom]

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.

[Alfonso]

Hi Tom,

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

You will can check and inspect all

[Tom]

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

Thanks!

[Alfonso]

Hi Tom,

Now is on Floats version and generate_after_mobile_menu_button hook

With this settings the SVG image is not displaying

[Tom]

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;
}

[Alfonso]

Hi Tom,

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

Congrats!!

[Tom]

Glad we got it working 🙂

[Author]

Posts