- This topic has 23 replies, 3 voices, and was last updated 4 years, 5 months ago by Tom.
December 6, 2018 at 4:25 pm #750140Marty
Hi. Hoping you can help.
Firstly, just wanted to say what a great theme. I switched over from Woo Themes Canvas theme about 1 year ago and am very happy.
Onto my question.
I want to position a clickable mobile number beneath the logo in the mobile header using the inside_mobile_header hook. Can you let me know how I can position this so the logo sits above and is centered and the menu sits below it to the left with the inside_mobile_header hook to the right?
The site is just on a temp URL for now, address included below.
MartyDecember 6, 2018 at 6:06 pm #750204TomLead DeveloperLead Developer
For this I would skip the mobile header and use the standard logo/mobile menu.
Then I would create a Hook Element and set it to the
generate_inside_navigationhook with this content:
<div class="mobile-bar-items"> <a href="#">My phone #</a> </div>
That should give you the look you’re wanting 🙂December 6, 2018 at 6:18 pm #750208Marty
Thanks Tom, works a charm. Much appreciated.December 6, 2018 at 6:35 pm #750218TomLead DeveloperLead Developer
You’re welcome 🙂December 10, 2018 at 8:35 pm #753423Marty
Hi Tom. I did have one additional question if not too much trouble.
Is it possible to add a centered button beneath the phone number also?December 11, 2018 at 9:28 am #753946LeoStaffCustomer Support
Can you link us to the site in question?December 11, 2018 at 1:43 pm #754137Marty
Sure thing, please see: http://188.8.131.52/~sdefence1138/
(currently on temp domain).December 11, 2018 at 5:07 pm #754225LeoStaffCustomer Support
Not sure if I understand “centered button beneath the phone number”, so inside the navigation but right under the phone number?December 11, 2018 at 5:31 pm #754238Marty
Hi Leo. Thanks for following up with me.
Yes exactly. At the current time on mobile, the menu displays to the left and the phone number to the right beneath the logo (thanks to the code supplied by Tom – please see above). I would also like to add a ‘bookings’ button that displays just beneath the menu and phone number and is centered. I would like this as part of the menu bar also so it stays at the top of the screen on mobile when sticky navigation for mobile is selected.
When currently trying to add additional code to the generate_inside_navigation element it adds the new html above and to the left.
Hope that helps.December 11, 2018 at 6:57 pm #754261LeoStaffCustomer Support
So here is how the sticky navigation is showing on mobile currently:
Is that what you have in mind? If so where should the button be?December 11, 2018 at 7:09 pm #754275Marty
Hi Leo, thanks for following up with me.
Please see link below.
The top image shows how it currently looks to me on iPhone (I had hoped it would look like this on all mobile devices). The second image shows what I would like to achieve e.g. the red button sitting below the menu and phone number.
Hope that all makes sense.December 11, 2018 at 7:50 pm #754287LeoStaffCustomer Support
My screenshot above was showing the sticky navigation view (scroll down).
Is that not what’s showing on your phone?
What should the sticky navigation look like with the button?December 11, 2018 at 8:01 pm #754292Marty
No, mine is showing as per the first example screenshot provided in my previous response.
the second is how I would like to look with the ‘book now’ red button.
MartyDecember 12, 2018 at 12:45 am #754378Marty
Hi Leo, apologies for any confusion caused here.
I don’t know why but the sticky header was not showing the same for me earlier, either that or I was looking at it wrong (I’ve been a little rushed the past couple of days), in any case, apologies for any confusion I may have caused..
I was hoping the sticky header would appear the same as the standard header looks in mobile and just wanted to add the red bar beneath with the ‘book now’ as per the image shown here:
Hope that’s a lot clearer. Thanks again Leo, I appreciate your help.
MartyDecember 12, 2018 at 7:55 am #754769LeoStaffCustomer Support
Are you sure you want the entire header plus button to be sticky on mobile?
Usually, that’s not very user-friendly as it takes half of the mobile screen as seen above in your screenshot.
- You must be logged in to reply to this topic.