Header Not Showing Full Width on Tablet

Hi @itwd,

Sorry for the delay in getting back at you.

The width of the header image is related to the height of the header in the tablet.

Would it be ok to you to increment the header height in tablet resolutions?
So I can provide you some CSS.

Thanks

Hi Rui:

So I changed the image height from 70px to 155px. It now looks fine on the tablet across all browsers, but the header image is stretched too much vertically on phones.

To add to my previous reply. The header stretches when holding the phone in “portrait” but displays well in landscape

• This reply was modified 3 years, 2 months ago by Rick.

Try to add this code below to the custom CSS option in the General options tab.

@media screen and (max-width: 759px){
.mob-retina-logo{
    height: 70px!important;
}
}

Using the code you supplied, the page now displays a large black space in between the header and the body of the page on both a phone and tablet (where it did not before).

https://phsboosterclub.org/

Thanks again for the help.

Replace the current code by this code instead.

@media screen and (max-width: 759px){
.mob-retina-logo{
    height: 70px!important;
}
body.mob-menu-overlay, body.mob-menu-slideout, body.mob-menu-slideout-over, body.mob-menu-slideout-top{
    padding-top: 70px!important;
}
.mob-menu-logo-holder, .mob-menu-header-holder{
height: 70px!important;
}

}

Rui:

That worked perfectly. Another question, if I may.

Is there some code I can add to CSS so that my top-level navigation (text) shows under the header in Chrome, as it does in Edge and Safari – instead of the hamburger?

https://phsboosterclub.org

Thanks!

… I should have added that I am talking about on tablets.

If you are using the option in Mobile Menu to display only in mobile devices I will suggest that you turn off that option and use the Width trigger at 1023px to see if it works.

Rui:

I tried this but the hamburger still shows on Chrome but still showed the “desktop” navigation in all other browsers, which is what I would like regardless of the browser on a tablet.

Thank you.

Try to place all that CSS in Appearance-> Customize -> Additional CSS and purge any cache plugin or cache mechanism

Will close the topic for now. Let me know if necessary.

Hi Rui:

Still having display problems on tablets using Edge or Chrome. Currently, the header is not full width and it is now covering part of the page on any page except the homepage, phsboosterclub.org. You will also note that the top navigation links show on the homepage, but the hamberger on all others.

Works fine on DuckDuckGo.

Correcting list of browsers where the header image merges into the page and widget content below. It does this in Chrome and Edge. It looks/works fine on Safari, Firefox, DuckDuckGo, and Brave.

phsboosterclub.org

Will close the topic for now and reply in the email.