Premium support

Please log in to post in these forums. If you didn't create an account when you purchased, please contact us.

Free support

If you haven't purchased GP Premium, support for the free theme can be found on WordPress.org.

[Resolved] Medium sized device resolution doesn't show header (logo or nav)

Home Forums Support Medium sized device resolution doesn't show header (logo or nav)

This topic contains 16 replies, has 3 voices, and was last updated by  Tom 5 days, 10 hours ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #384200

    I tried to fix this issue myself but I can’t get it to work.

    My logo is too long so I looked thru documentation and posted this code to make the breakpoint for mobile/hamburger icon higher (medium sized device):

    /* header and mobile menu for tablet */
    @media (min-width: 481px) and ( max-width: 950px ) {
    #site-navigation,
    #sticky-navigation {
    display: block !important;
    opacity: 0;
    }
    #mobile-header {
    display: none !important;
    opacity: 1;
    width: 100% !important;
    }
    .mobile-header-navigation.is_stuck {
    box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
    }
    .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    display: inline-block;
    float: right;
    clear: none;
    width:auto;
    }
    #mobile-header .menu {
    display: none;
    }
    .site-header {
    display: none;
    }

    .mobile-header-navigation .mobile-header-logo {
    float: left;
    display: block;
    }
    .mobile-header-navigation .mobile-header-logo img {
    position: relative;
    vertical-align:middle;
    padding: 10px;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .nav-float-left .mobile-header-navigation .mobile-header-logo,
    .rtl .mobile-header-navigation .mobile-header-logo {
    float: right;
    }
    .nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
    .rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    float: left;
    }
    .mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    position: relative;
    float: right;
    }
    .rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    float: left;
    }
    body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
    position: absolute;
    right: 0;
    top: 0;
    }
    body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
    left: 0;
    right: auto;
    }
    }

    It was working fine but for some reason, between small device size and desktop size, the entire header disappears. It was working fine and I haven’t made any major changes other than a transparent header so I’m not really sure what’s causing it.

    Can you help?

    GeneratePress 1.4
    GP Premium 1.4.3
    #384253

    Update: I’m deleting the above code and trying to troubleshoot from scratch.

    Now, I’m getting somewhere but I’m having trouble with the transparent header and the mobile menu being overlayed together causing it to be difficult to see the hamburger.

    I’ll keep updating with more info.

    #384267

    Leo
    Staff

    Can you send me the password to view the website if you need us to take a look?

    You can just reply to our e-mail thread.

    I know I have the admin access but would like to avoid it if I can 🙂

    Thanks!

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #384317

    I sent the password thanks

    #384322

    Leo
    Staff

    Thanks 🙂 What’s are the current questions?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #384328

    When the window is resized, the navigation starts to break up onto the next line right before it turns into mobile header mode. Email a screenshot of it.

    The code I am using I found in the documentation is this:

    @media( max-width: 768px ) {
    #site-navigation,
    #sticky-navigation {
    display: none !important;
    opacity: 0;
    }
    #mobile-header {
    display: block !important;
    opacity: 1;
    width: 100% !important;
    }
    .mobile-header-navigation.is_stuck {
    box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
    }
    .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    display: inline-block;
    float: right;
    clear: none;
    width:auto;
    }
    #mobile-header .menu {
    display: none;
    }
    .site-header {
    display: none;
    }
    .mobile-header-navigation .mobile-header-logo {
    float: left;
    display: block;
    }
    .mobile-header-navigation .mobile-header-logo img {
    position: relative;
    vertical-align:middle;
    padding: 10px;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    .nav-float-left .mobile-header-navigation .mobile-header-logo,
    .rtl .mobile-header-navigation .mobile-header-logo {
    float: right;
    }
    .nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
    .rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    float: left;
    }
    .mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    position: relative;
    float: right;
    }
    .rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
    float: left;
    }
    body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
    position: absolute;
    right: 0;
    top: 0;
    }
    body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
    left: 0;
    right: auto;
    }
    }

    On a related note, if I change the max-width from 768px to something higher, like 1000px, the header will entirely disappear in the medium sized device range.

    I’m worried when I start adding or changing the navigation items, it will get messed up even further.

    #384353

    Leo
    Staff

    Looks like your site is down with some PHP error? Can you double check?

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #384358

    Hey leo, I just fixed it sorry about that.

    #384365

    Leo
    Staff

    Hmm I’m not seeing the problem? This is exactly at 769px and the menu isn’t breaking up: https://s26.postimg.org/eab19suyx/2017-09-12_2152.png

    Also if you want to use the mobile header, then you can try uploading the M icon as the mobile header logo.

    If you prefer the normal logo then try turning off the mobile header feature.

    Let me know if this helps.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #384368

    Hi Leo,

    Okay I figured out why it went away. If I add the Home page back to the navigation, it starts to break up. With only 4 items, it seems OK.

    Is there a way to work around this especially if I start adding pages?

    See pic please:

    View post on imgur.com

    I appreciate the help.

    Thanks again.

    #384767

    Leo
    Staff

    If you are using mobile header then try the CSS here: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

    You can change the increase the px number in there so that it switches to mobile mode before the menu jumps to next line.

    Let me know.

    Want to help support GP? Please consider leaving us a review!
    https://wordpress.org/support/theme/generatepress/reviews

    #384828

    Hey Leo, that’s the code I was already using. I commented it out because it didn’t change anything, but I enabled it again and will not touch the site so you can see it without me changing anything.

    That code appears to not fix the issue set at 768 or anything lower, but if it’s set to something higher like 1000px (which is set to right now).. instead of fixing the nav items being broken up, the entire header disappears.

    Screenshot:

    View post on imgur.com

    I’ve tried to disable the transparent header and still no-go unfortunately.

    #384838

    A video might be easier to explain. I recorded a screen recording of it: https://vimeo.com/233710085

    Password is the same password to view the website I sent over email. Thanks.

    #384952

    Any thoughts? I’ve been trying to fix it all day I cant get it to work..

    #385016

    Tom
    Lead Developer

    Hi David,

    Just answered you on Facebook, but I’ll post it here as well.

    This might help:

    @media (max-width: 900px) {
        .main-navigation button.menu-toggle {
            display: block;
            width: auto;
            float: right;
        }
    
        .main-navigation ul {
            display: none;
        }
    }
Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.