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: Dante
• August 7, 2015 at 1:25 pm #201907
  marekpolak

  Member

  Post count: 4

  Hi Support,

  I have read numerous related support forums related to similar situation and tried all suggested custom codes, etc to no avail.

  What I’m trying to achieve is either:
  1. Standard Header, but make the background colour transparent, so only logo shows up and there is no header border or shadow.
  or
  2. Use Naked Header, which seem to work but only to some extend.

  Issue:
  When I use Standard Header, how can I make background transparent, but not the whole header. I have found some custom CSS which makes whole header transparent including the logo. This is not what I’d like to achieve.
  Secondly, when I use Naked Header page looks as expected, but only when the viewpoint is at the very top of the page. The moment I start scrolling the page down header shows a white background and border/shadow. How can it be fixed?

  I want to mention that I’ve tried various theme settings provided like Sticky Header (ON/OFF), different header styles (Standard, Naked Light and Dark), Header Shadow (ON/OFF), etc. None of these gave me the results I’d like to achieve.
  I have even tried to update to 3.0.3 but this update seem to break so many things (as reported in other threads) that I reverted installation back to 2.8.2 from the backup.

  I would be very grateful, if you could suggest a permanent fix/solution to this

  Kindest regards,
  Marek

  August 10, 2015 at 2:27 pm #202414
  David Martin – Support

  Moderator

  Post count: 20834

  Hi Marek,

  From what you say, you want a transparent header without a border?

  If so, please use this:

  .is-sticky #header.sticky-header.sticky-header-resized {
      background-color: transparent!important;
      border-bottom: none!important;
  }

  – David.

  August 10, 2015 at 2:43 pm #202425
  marekpolak

  Member

  Post count: 4

  Hi David,

  Thanks for your suggestion. I have tried this css before. The outcome is:
  Background is indeed transparent, but header still contains a shadow even though Header Shadow setting is OFF. As you scroll down the page over different sections and images it is still visible there is a header shadow. Also, the original issue is not resolved where header “blinks” white background as you scroll the page. What I mean is that on load the header is transparent, but when I scroll the page white background appears and header becomes transparent again, when I stop scrolling.
  Can it be fixed somehow?

  Many thanks
  Marek

  August 10, 2015 at 6:43 pm #202507
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Yes I see the shadow, please use my updated CSS to remove it:

  .is-sticky #header.sticky-header.sticky-header-resized {
      background-color: transparent!important;
      border-bottom: none!important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
      -moz-box-shadow: none !important;
  }

  – Can you add a WP login for me to take a further look also?

  Thanks,
  David.

  August 12, 2015 at 12:40 pm #203171
  marekpolak

  Member

  Post count: 4

  This reply has been marked as private.
  August 12, 2015 at 1:15 pm #203200
  David Martin – Support

  Moderator

  Post count: 20834

  Hey,

  Sure, please also add:

  .naked-header .is-sticky #header.sticky-header {
      background-color: transparent!important;
  }

  – David.

  August 12, 2015 at 1:23 pm #203208
  marekpolak

  Member

  Post count: 4

  Superb!

  David, thank you very much for your patience and support.
  Please, feel free to close the ticket.

  Best regards,

  Marek

  August 12, 2015 at 1:46 pm #203223
  Mohammad – SUPPORT

  Moderator

  Post count: 27441

  Hi,
  Great thanks to David.
  Mohammad

• Back to forum

  Posted in: Dante