[Support request] Mobile Menu Contact info

[Daniel]

Hi

I build a website with your theme and made some custom chagnes in the header and in the mobile header see here

http://wordpress-55262-534639.cloudwaysapps.com/

On Desktop i put the menu under a main header which i set with hooks… works fine… on mobile i placed the menu sticky on top just with some css changes (it was also under the main header before)… i have the menu now left and a header bar… my question is can i put just an icon on the right in the menu bar with an onclick function so the contact info opens up in a small window… ot even better would be just css with a click… but i dont know where i can put the content and in? Here is the old page where its exactly like i want it to be (on mobile) http://ostermann.doctor/

thanks for help

[Tom]

Hey Daniel,

You would need to implement some sort of javascript tooltip library on click. There are tons of them out there if you search for “jQuery tooltip”. Tooltipster is the only one I can think of off the top of my head.

As for inserting the clickable item, it’s easier if you use the mobile header: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

However, we can also make it work with the default mobile menu if needed.

Let me know 🙂

[Daniel]

ok at the moment it works fine with the default menu… so i guess it would be easier just to place the three dots like here in the regular menu http://ostermann.doctor/

[Tom]

Ok, so in that case, you would:

1. Activate the Elements module.
2. Create a new Hook element.
3. Add this content:

<div class="mobile-bar-items">
    Your three dot code with tooltips integrated.
</div>

4. Set the inside_navigation hook.

5. Set a Display Rule.

[Daniel]

OK thanks… i installed the new elements … by the way great way to customize the header

But after setting the hook up i nothing happens… for testing i just tried the text and copy pasted the code but the mobile bar is still the same like before?!

[Leo]

Can you check if the display rule is set for the entire site?

I’m not seeing the content showing up.

[Daniel]

i set the display rule to entire site yes!

[Tom]

That’s strange. Any chance you can send me temporary admin login details so I can take a closer look?: https://generatepress.com/contact

Be sure to mention this topic.

Let me know 🙂

[Daniel]

i sent you the credentials

thanks so much for the support

[Tom]

Hi Daniel,

Sorry about this – we were having issues with our Account Issue form.

Can you send it again? All should be working now.

Let me know 🙂

[Tom]

So the HTML does exist within the main navigation.

However, the mobile header is activated, so the main navigation isn’t displaying on mobile.

To insert that code into the mobile header, you would use the inside_mobile_header hook.

[Daniel]

Ok i think i manged it only with css… problem is it doesnt work on Iphones… i have no idea why.. i do know that is not a support issue but if you could take a quick look … this would be great…

ostermann.doctor ist the domain and the html and css is

<div class="mobile-bar-items ">
	
 <li class="tipClick"><a href="#">
				<img src="http://ostermann.doctor/wp-content/uploads/2018/10/dots-vertical-nav-more-512.png" />
			</a>
	 
	 <div class="tooltipB">
	 
	 <a href="tel:+43-1-934 66 00"><i class="fa fa-phone" ></i> +43-1-934 66 00</a>
								<a href="https://www.google.com/maps/place/J%C3%B6rgerstra%C3%9Fe%2B11%2B1170%2BWien"><i class="fa fa-map-marker"></i> Jörgerstraße 11, 1170 Wien</a>
				<a href="mailto:ostermann@diepraxis-wien.at"> <i class="fa fa-envelope" ></i>  ostermann@diepraxis-wien.at</a> 
	 
	 </div>
	</li>
	 

</div>

/***** mobile contact info
*****************************
*******/

.mobile-contactinfo {
background-color: #3a3a3a;
height: 41px;
}

.mobile-contactinfo img {
height: 32px !important;
}

.tipClick{
position:relative !important;
display:inline-block;
}

.tipClick > .tooltipB {
display:none;
}
.tipClick > a:focus + .tooltipB {
display:block;
}

.tooltipB {
background: white;
border-radius: 0.5rem;
padding: 1rem;
color: black;
float: right;
position:absolute;
right:1rem;
top: 3rem;
font-size:0.7em;
width:280px;
z-index:10;

}

.tooltipB a {
font-size: 15px;
line-height: 38px !important;
}

[Tom]

What about it isn’t working exactly?

[Daniel]

on iphone nothing happens if you touch the three buttons… on all other phones it works and the pop up shows the contact info…

thanks for help

[Tom]

Is there somewhere I can see this? Your site doesn’t seem to be using the mobile header?

[Author]

Posts