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

[David]

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?

[David]

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.

[Leo]

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!

[David]

I sent the password thanks

[Leo]

Thanks 🙂 What’s are the current questions?

[David]

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.

[Leo]

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

[David]

Hey leo, I just fixed it sorry about that.

[Leo]

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.

[David]

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.

[Leo]

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.

[David]

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.

[David]

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.

[David]

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

[Tom]

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;
    }
}

[Author]

Posts