ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• March 14, 2016 at 3:27 pm #255302
  spencerherron

  Member

  Post count: 12

  Hi there,

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

  Kind regards,
  Spencer

  March 14, 2016 at 3:30 pm #255306
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 14, 2016 at 3:46 pm #255313
  spencerherron

  Member

  Post count: 12

  This reply has been marked as private.
  March 15, 2016 at 11:39 am #255488
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 15, 2016 at 12:32 pm #255518
  spencerherron

  Member

  Post count: 12

  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

  March 15, 2016 at 12:34 pm #255522
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 15, 2016 at 1:14 pm #255536
  spencerherron

  Member

  Post count: 12

  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.
  March 15, 2016 at 1:21 pm #255539
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  March 15, 2016 at 1:25 pm #255541
  spencerherron

  Member

  Post count: 12

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

  Kind regards,
  Spencer

  March 15, 2016 at 1:30 pm #255543
  Kyle – SUPPORT

  Moderator

  Post count: 35880

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

  – Kyle

  March 15, 2016 at 1:47 pm #255544
  spencerherron

  Member

  Post count: 12

  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

  March 15, 2016 at 1:49 pm #255545
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  March 15, 2016 at 2:09 pm #255549
  spencerherron

  Member

  Post count: 12

  Magic! Thanks, much appreciated.

  March 15, 2016 at 2:11 pm #255552
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  No problem 🙂

  December 10, 2016 at 4:29 pm #306134
  Guiseppe2000

  Member

  Post count: 6

  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

• Back to forum

  Posted in: Atelier