getting logo and call now button inside mobile menu

Hello andrew55

so am i understanding this correctly you want to display a call now button in the menu once the users views your website on mobile?

Regards
Ruben Mostert

Yes – that would be great!

Making the small logo pic and call now button visible, only for mobile devices, could be easily done with media queries – I think.

My issue is getting them inserted in the the menu inline – I guess this would need to be done with a snippet, such as the example I gave with the search form?

Thanks for any suggestions.

i see in your code you got your li tags

<li>Link 1</li>
<li>Link 2</li>
<li>Mobilebutton</li>

What you can do is create 2 media queries in the css

@media only screen and (max-width: 480px){
}
and
@media only screen and (max-width: 320px) {
}

create a class in the css lets say .mobilebutton
so your code in the css wil look like this.

@media only screen and (max-width: 480px){
.mobilebutton{ display:block}
}
@media only screen and (max-width: 320px) {
.mobilebutton{ display:block}
}
}

Dont forget outside of your media tags use .mobilebutton{display:none;}

and your li for the button must look like

<div class="mobilebutton">
<li><a href="link to the number"><img src="link to the image"></a></li>
</div>

Kind Regards
Ruben Mostert

Thanks, but I’m a little lost.

I’m just not real clear how to get the images inserted into the menu.

Do I do this in the header.php file, the functions.php file, or do I accomplish this all be using css?

Once I get them inserted, I can style them and control their visibility for mobile devices, but I just can’t figure out how to get them inserted.

Just to be clear, my intention was to install a couple images into mobile navbar – one of a small logo and another for a call now button.

So when I user comes into site, before they do anything, they see small logo and call now button right in the mobile nav bar.

After some trial and error, I figured I could do a dirty hack to class-header-menu.php

I got the result I wanted, but of course, I’ll have to update the hack every theme update.

If anyone figures out a way to do this through funtions.php, or another clean approach, please let me know.

On a full-sized screen, do you want the RSS feeds to show or not?

Me personally, no. I just hid social-block using display: none for that issue.

You can see the result here:
https://www.lifeleap.org/themetest/

The small images look good in my mobile and in Google Developer Tools, but another contributor says it is breaking menu. I am now trying to figure this issue out.

(assuming you don’t want the socials in the mobile navbar)

The following should do it:

add_filter( 'tc_social_in_header', 'add_mobile_call_links', 10, 2);
function add_mobile_call_links( $html, $resp) {
	if ( $resp == 'resp' ) {
		return '<span>YOUR HTML</span>';
	} else {
		return $html;
	}
}

spans are better than divs, as you won’t have an extra line, which takes up valuable space on a mobile.

You could also consider using a genericons icon for the phone image, instead of using another .png, as it will load immediately, rather than involve another http call.