Hi Paul, You are a Gem! It works perfectly in the browser on PC (no more tall header) but I am seeing the tall header still on my phone!! Do you think its cached, I tried refreshing the screen several times.

Can you attach a screenshot of what the phone looks like now?

Just in case regarding the cache

www.joomlabamboo.com/blog/how-to-joomla/how-to-clear-cache-in-joomla3

If you use siteground the last section can be relevant

I checked there is actually nothing in the Clear Cache page, what I see on phone is just the same as previous screenshot Screenshot...4-34.png above, on PC the tall white header is now gone, just like in your screenshot above, but on my phone its still there, blocking half of the slideshow.

I can't test this myself but also target this line in the media query

.t3-mainnav {height: 86px;}

reducing 86px to a smaller value

I added it to custom.css, is that the best way?
@media screen and (max-width: 750px) {
.navbar-header {height: 46px;margin-top:0px}
#logo img {margin-top:-15px}
.navbar-toggle #togglemenutext {margin-left:0}
.t3-mainnav {height: 16px;}
}
but its still tall in phone. Sorry Paul!

I wouldn't use 16px I'd be consistent with the value used so the height values are the same or similar and 16px is too small

try targeting this div with a media query

.navbar {min-height: 86px;}

Cheers
Paul

I just thought 86px might be too much for the small phone display, but none of these appear to change what shows on the phone. I thank you again for your assistance, I feel so incapable sometimes, and other times the thing just changes! CSS with all these stylesheets and rules can be a bear.
@media screen and (max-width: 750px) {
.navbar-header {height: 86px;margin-top:0px}
#logo img {margin-top:-15px}
.navbar-toggle #togglemenutext {margin-left:0}
.t3-mainnav {height: 86px;}
.navbar {min-height: 86px;}
}

Regarding 86px- that is the template default so it needs to be less

probably all around the previous value of 46px - 50px just not something too small like 16px

still not targeting that tall white header on the phone. I know you must be getting tired of this one. On PC, header's tallness is reduced, but not on phone.
@media screen and (max-width: 750px) {
.navbar-header {height: 46px;margin-top:0px}
#logo img {margin-top:-15px}
.navbar-toggle #togglemenutext {margin-left:0}
.t3-mainnav {height: 46px;}
.navbar {min-height: 46px;}
}

Still looks exactly the same on the phone?

yes

right I'll need to ask Rob to take a look

Cheers
Paul

Good morning! It is best to open a ticket on this issue? Thanks again for all your valuable help!

Yes think that is best

Cheers
Paul