Pro navbar iPhone issue

[kcreative]

Hello,

The the navbar of the website is displaying funny on iPhones (safari and chrome). Please see the attached screenshots and advise a solution.

Thank you!

[ruenel]

Hey @kcreative,

Thanks for posting in! I am seeing the identical header navbar on both screenshots. Can you please give further clarification or at least a video screencast of your site on the iPhone so that we will have a clear idea of what is going on?

Best Regards.

[kcreative]

The above two images are how it looks like on two different browsers on iPhone. This is how the header is supposed to look. See attached.

[kcreative]

Hi, following up on this as there has been no response…

[ruenel]

Hey @kcreative,

Please be informed that the Topbar Content is supposed to have text content with inline HTML tags only. And you have added a bunch of Header HTML tags. You can update it to this one instead:

</p><button class="payment-mobile">
<a href="https://crestedbuttedentist.com/payments-and-financing/">Make a Payment</a></button>
<a href="https://g.page/CBFamilydental?share" class="nav-contact" target="blank">
<i class="e57-16 x-icon" aria-hidden="true" data-x-icon-s="" style="color: white;font-size: 20px;"></i></a>
<a class="nav-contact"href="tel:9703495880">
<i class="e58-16 x-icon" aria-hidden="true" data-x-icon-s="" style="color: white;font-size: 20px; margin-left: 30px; margin-right: 30px;"></i></a>
<a class="nav-contact" href="mailto:office@crestedbuttedentist.com">
<i class="e57-16 x-icon" aria-hidden="true" data-x-icon-s="" style="color: white;font-size: 20px;"></i></a>

<header class="header">

    <div class="container">
        <div class="row">
            <div class="header-contact-info col-xs-12" style="display: flex;align-items: center;">

<a href="https://crestedbuttedentist.com/" class="x-brand img">
  <img src="//crestedbuttedentist.com/wp-content/uploads/2020/11/CBDental-final-logo-color.png" alt="Crested Butte Dental"></a>

 
                <p class="location" style="margin-left: 4em; "><i class="e57-16 x-icon" aria-hidden="true" data-x-icon-s="" style="margin-top: 22px;"> <span style="color: black; font-family: Arial; margin-left: 5px;">Address</span></i><br><a href="https://g.page/CBFamilydental?share" class="nav-contact" target="blank"> 80 Glacier Street<br/> <span> Crested Butte South, CO 81224.</span></a></p>


                <p class="phone"><i class="e57-16 x-icon" aria-hidden="true" data-x-icon-s=""><span style="color: black; font-family: Arial; margin-left: 5px;">Email</span></i><br><a class="nav-contact" href="mailto:office@crestedbuttedentist.com">office@crestedbuttedentist.com</a></p>

                <p class="phone"><i class="e57-16 x-icon" aria-hidden="true" data-x-icon-s=""><span style="color: black; font-family: Arial; margin-left: 5px;">Phone</span></i><br><a class="nav-contact"href="tel:9703495880">(970) 349-5880 </a><br><span style="color: black;">Fax: (970) 349-9485</span><br></p>

<button class="payment">
<a href="https://crestedbuttedentist.com/payments-and-financing/">Make a Payment</a></button>

            </div>



        </div>


</header><p>

The code above may look invalid. This is a little hack to override those in placed <p></p> HTML tags in the Topbar Content.

Best Regards.