[Resolved] inside_mobile_header below logo

[Marty]

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.

Cheers
Marty

[Tom]

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_navigation hook with this content:

<div class="mobile-bar-items">
    <a href="#">My phone #</a>
</div>

That should give you the look you’re wanting 🙂

[Marty]

Thanks Tom, works a charm. Much appreciated.

[Tom]

You’re welcome 🙂

[Marty]

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?

[Leo]

Can you link us to the site in question?

[Marty]

Sure thing, please see: http://66.117.14.55/~sdefence1138/
(currently on temp domain).

[Leo]

Not sure if I understand “centered button beneath the phone number”, so inside the navigation but right under the phone number?

[Marty]

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.

[Leo]

So here is how the sticky navigation is showing on mobile currently:
https://www.screencast.com/t/jlEJk2YuJ

Is that what you have in mind? If so where should the button be?

[Marty]

Hi Leo, thanks for following up with me.

Please see link below.

View post on imgur.com

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.

[Leo]

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?

[Marty]

Hi Leo.

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.

Many Thanks
Marty

[Marty]

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:

View post on imgur.com

Hope that’s a lot clearer. Thanks again Leo, I appreciate your help.

Cheers
Marty

[Leo]

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.

[Author]

Posts