Support » Plugin: WP Mobile Menu - The Mobile-Friendly Responsive Menu » Header Not Showing Full Width on Tablet

  • Rick

    (@itwd)


    My Header image displays the full-width on phones and desktops/laptops but not on tablets regardless of browser. Any ideas?

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Rui Guerreiro

    (@takanakui)

    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

    Thread Starter Rick

    (@itwd)

    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.

    Thread Starter Rick

    (@itwd)

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

    • This reply was modified 4 months, 3 weeks ago by Rick.
    Plugin Author Rui Guerreiro

    (@takanakui)

    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;
    }
    }
    Thread Starter Rick

    (@itwd)

    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.

    Plugin Author Rui Guerreiro

    (@takanakui)

    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;
    }
    
    }
    Thread Starter Rick

    (@itwd)

    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!

    Thread Starter Rick

    (@itwd)

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

    Plugin Author Rui Guerreiro

    (@takanakui)

    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.

    Thread Starter Rick

    (@itwd)

    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.

    Plugin Author Rui Guerreiro

    (@takanakui)

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

    Plugin Author Rui Guerreiro

    (@takanakui)

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

    Thread Starter Rick

    (@itwd)

    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.

    Thread Starter Rick

    (@itwd)

    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

Viewing 14 replies - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.