Archived topic
Add image on mobile header
25 replies · Started by Alfonso on November 3, 2020
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
Hi there,
What kind of image?
You want to add it beside the search icon?
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(
'
',
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
Try this solution here:
https://generatepress.com/forums/topic/add-link-before-woo-cart-on-mobile-menu/#post-1506832
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
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 ?
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
Do you want to remove the Cart and Search icons then ?
At the moment, no.
Thanks!
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;
}Are you wanting to keep the mobile toggle, search and cart icons on the right?
yes, right before my svg image
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;
}
