Naked Mobile Header

[spencerherron]

Hi there,

Is there anyway to please have a ‘naked’ mobile header?

Kind regards,
Spencer

[Kyle – SUPPORT]

Hi

Try this:

@media only screen and (max-width: 991px) {
.mhs-tablet-port #mobile-top-text, 
.mhs-tablet-port #mobile-header, 
.mhs-tablet-port #mobile-header-sticky-wrapper {
    display: block;
    position: absolute;
    background-color: transparent;
}
}

– Kyle

[spencerherron]

This reply has been marked as private.

[Kyle – SUPPORT]

Try this

.home #mobile-header {
  background-color: transparent;
  display: block;
  position: absolute;
  border: none;
}
.home #mobile-header #mobile-logo .standard {
  display: none!important;
}
.home .logo-alt-version #mobile-logo img.alt-logo {
  display: inline-block!important;
}
.home #mobile-header a {
  color: #fff;
}

– Kyle

[spencerherron]

Hi Kyle,

Thanks, thanks kinda worked, the mobile header is ‘naked’ but now it loads both headers when on desktop, i.e. mobile + normal, so I’ve got two headers overlapped.

Kind regards,
Spencer

[Kyle – SUPPORT]

Ahh, add inside a media query, so:

@media only screen and (max-width: 479px) { 
.home #mobile-header {
  background-color: transparent;
  display: block;
  position: absolute;
  border: none;
}
.home #mobile-header #mobile-logo .standard {
  display: none!important;
}
.home .logo-alt-version #mobile-logo img.alt-logo {
  display: inline-block!important;
}
.home #mobile-header a {
  color: #fff;
}
}

– Kyle

[spencerherron]

Hi Kyle,

Awesome thanks, it worked but just one or two bugs.

1. When on desktop and you reduce the width of the page, the non-naked header still appears (see image attached header), until you minimize it enough then it will switch to naked.
2. Is there anyway to make the ‘hamburger’ menu icon switch to white on the homepage? (i.e. I still want it black on the other pages). See image attached header2.

Many thanks for your help. Much appreciated.

Kind regards,
Spencer

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

In the mobile header options, what option have you selected for the header menu to activate?

– Kyle

[spencerherron]

I’ve tried all three i.e. mobile, tablet portrait and tablet landscape but none seem to fix it.

Kind regards,
Spencer

[Kyle – SUPPORT]

You will need to adjust the max width value of the css I gave you, iPad landscape is 1024px, portrait 768px

– Kyle

[spencerherron]

Fantastic, thanks Kyle that’s fixed it. And by any chance do you know how to make the ‘hamburger’ icon white just on the front page?

Kind regards,
Spencer

[Kyle – SUPPORT]

Great

.home #mobile-header a.mobile-menu-link span.menu-bars, .home #mobile-header a.mobile-menu-link span.menu-bars::before, .home #mobile-header a.mobile-menu-link span.menu-bars::after {
  background-color: #fff;
}

– Kyle

[spencerherron]

Magic! Thanks, much appreciated.

[Kyle – SUPPORT]

No problem 🙂

[Guiseppe2000]

Hello,

just started building our new website, http://www.atelier180.nl, with this great theme, very inspiring to work with! I’m struggling a little bit with the naked header for mobile (phone and tablet) though: I’ve inserted the custom code, and now the header is naked on tablet and phone, but only on the homepage. My question therefore is: how do I manage to get the header to be naked on all pages (for example: journal, work, etc.)? Your help is much appreciated!

Regards,
Joost van den Hurk