[Resolved] inside_mobile_header below logo

Home Forums Support inside_mobile_header below logo

This topic contains 23 replies, has 3 voices, and was last updated by  Tom 16 hours, 21 minutes ago.

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #750140

    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

    GP Premium 1.7.5
    #750204

    Tom Lead 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_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 🙂

    #750208

    Marty

    Thanks Tom, works a charm. Much appreciated.

    #750218

    Tom Lead Developer
    #753423

    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?

    #753946

    Leo Customer Support

    Can you link us to the site in question?

    #754137

    Marty

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

    #754225

    Leo Customer Support

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

    #754238

    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.

    #754261

    Leo Customer Support

    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?

    #754275

    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.

    #754287

    Leo Customer 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?

    #754292

    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

    #754378

    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

    #754769

    Leo Customer 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.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.