Site Header Phone + Donate button

Font and logo sizes may need adjusting so it fits small devices.
First off edit the HTML you added for the phone icon / number to this:

<span class="phone-cta"><i class="fas fa-phone-alt"></i> 1300 444 555</span>

Then add this CSS:

/* stack menu toggle and text */
#mobile-header .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Move mobile logo to first position */
.site-logo.mobile-header-logo {
    order: -1;
    margin-right: unset;
}

/* Center phone cta between logo and toggle */
.phone-cta {
    margin: auto;
}

Thank you again David! That definitely re-arranged the 3 items left>right correctly (logo/phone/hamburger).

1. First thing I notice is that on desktop, on all browser widths, the 3 items are tightly clustered together on a fixed 'content width' rather than left - right align with horizontal spacing between.

2. Logo size I have some existing code to control but doesn't seem to work now.

/* Mobile reduce logo size and site title */
@media (max-width: 530px) {
.site-logo img {
max-width: 236px;
max-height: 80px;
}
}

3. Phone font size need help on :)

4. Hamburger size need help on, plus control vertical space between icon and menu label.

1. I am not seeing this part of the CSS which is what forces the space around the phone:

/* Center phone cta between logo and toggle */
.phone-cta {
    margin: auto;
}

2. You're using the mobile header - which has its own logo so this CSS:

.site-logo.mobile-header-logo img {
    max-height: 60px;
}

3. You would add a eg. font-size: 16px; property to .phone-cta rule eg.

.phone-cta {
    margin: auto;
    font-size: 16px;
}

Thanks David

1. & 2. are working :)

3. is only adjusting the size of the Phone Icon, and no change to the numbers though?

cheers

If i edit the CSS in the browser tools to change the font size then it works ? Try adding a ridiculously small or large font size to see if it changes. If not then wrap the number in <span></span> tags

Yes you are correct. In Chrome, the font changes work correctly across the icon plus phone number. I've already got the number wrapped as per...
<span class="phone-cta"><i class="fas fa-phone-alt"></i> 1300 444 555</span>

Also works correctly across all phones at https://mobilemoxie.com/

However on an actual iPhone 7 & 8, we're getting this:
https://koorana.wpengine.com/wp-content/uploads/2020/01/iphone8-01.jpg

That's strange - what browser are you using?

Can you make sure the browser cache is cleared on your phone?

Hey Tom

Yes cache cleared on phone. I've narrowed down the issue of Phone Number font size blowing out - it appears to only be on Safari.

Using Chrome on iPhone it displays correctly.

Any clues on this one?

Also - are you able to send through any css to control the vertical position of the Phone + Icon and its color?

Many thanks.

iPhones recognise what it believes to be a phone number and turns it into a link, add this CSS to resolve that:

.main-navigation .phone-cta a {
    font-size: 15px;
    display: inline;
}

Thanks again David. That worked.

Hopefully last request on this one:

Are you able to send through any css to control the vertical position of the Phone + Icon and their color for Mobile?

Cheers

Update this CSS:

.phone-cta {
    margin: auto;
    font-size: 16px;
}

to:

.phone-cta {
    margin: auto;
    font-size: 16px;
    margin-bottom: 20px; /* Adjust for vertical position */
    color: red; /* Set text color */
}

.phone-cta i {
    color: blue; /* Set icon color */
}

Thanks David - that works great!

cheers

You're welcome