[Resolved] Add image on mobile header

[Alfonso]

Hello,

I need to add image on mobile header on the right of screen.

How i can do that??

This is my website:

https://www.delahuertacasa.com

Thanks

[Leo]

Hi there,

What kind of image?

You want to add it beside the search icon?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alfonso]

Hi Leo,

this is the imagen that i need to add:

https://snipboard.io/YyVez2.jpg

Is a svg file.

This svg file is added whis this snippet on desktop layout:

add_filter( ‘generate_logo_output’, ‘tu_logo_class’, 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
printf(
‘

<span class=”icon-logo-home home-logo %3$s”></span>

‘,
esc_url( apply_filters( ‘generate_logo_href’ , home_url( ‘/’ ) ) ),
esc_attr( apply_filters( ‘generate_logo_title’, get_bloginfo( ‘name’, ‘display’ ) ) ),
$html_attr
);
}

The ideal is on the right of the toogle menu button

[Leo]

Try this solution here:
https://generatepress.com/forums/topic/add-link-before-woo-cart-on-mobile-menu/#post-1506832

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alfonso]

Hi Leo,

Thanks for your reply, may be a good solution. Im tried all mobile hooks but I have not managed to place my content after the toogle menu

[David]

Hi there,

why not add the Image inside you Header Element, after the slider, then we can use some CSS to absolutely position it relative to the header element ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alfonso]

Is not possible to make the same with CSS and adding in generate_inside_mobile_menu_bar ??

https://www.staging8.delahuertacasa.com/

I need to display on the right like this screenshot

https://snipboard.io/9JPS5N.jpg

[David]

Do you want to remove the Cart and Search icons then ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alfonso]

At the moment, no.

Thanks!

[Tom]

Hi there,

You could try adding it to the generate_inside_mobile_header hook using our Hook Elements:

<img src="URL TO YOUR IMAGE" class="mobile-header-custom-image" alt="" />

Then you should be able to do this:

.mobile-header-custom-image {
    position: absolute;
    top: 5px;
    right: 5px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alfonso]

Thank you Tom,

with this css is not displaying fine:

https://snipboard.io/ZUVDxT.jpg

[Tom]

Are you wanting to keep the mobile toggle, search and cart icons on the right?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alfonso]

yes, right before my svg image

[Tom]

In that case, what if you use the generate_menu_bar_items hook?

Then do this:

.mobile-header-custom-image {
    display: none;
}

#mobile-header .mobile-header-custom-image {
    display: block;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alfonso]

Hi Tom,

I don’t find that hook (generate_menu_bar_items):

https://snipboard.io/Qnv5wg.jpg

[Author]

Posts