Okay
  Public Ticket #1282069
Make Header Semi transparent (without scrolling)
Closed

Comments

  •  1
    Shyam started the conversation
    August 24, 2017 at 10:21am

    Hey guys!

    I am trying to make the header semi transparent but there only seems to be an option to make it fully transparent. When I turn this option off, the nectar slider gets pushed below the header instead of staying under the header as before. Is there a way by which I can customize the colour and opacity of the transparent header. Please note I am looking to customize the header options while it is on the top of the page, before we start scrolling.

    Any help on this will be greatly appreciated.

    Attaching screenshots of how it looks with transparent header and without.

    Thanks

    Shyam

  •  8,470
    Tahir replied
    August 24, 2017 at 11:41am

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    @media only screen and (min-width: 1001px) {
    html body #header-outer[data-transparent-header="true"].transparent {
        background-color: rgba(255, 238, 170, 0.67) !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  1
    Shyam replied
    August 28, 2017 at 6:45am

    Hey Tahir,

    Thanks for this fix it seems to be working just fine. Just one small issue, this change doesn't seem to be working for the responsive header.

    Any suggestions on how I can apply the same settings to the responsive header as well.

    Looking forward to your response.

    Thanks


  •  8,470
    Tahir replied
    August 28, 2017 at 6:51am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

    body #header-outer, body[data-header-color="dark"] #header-outer {
    background-color: rgba(255, 238, 170, 0.67)  !important;
}

    Thanks

    ThemeNectar Support Team 

  •  1
    Shyam replied
    September 4, 2017 at 7:46am

    Hi Tahir,

    I have tried inserting the code that you sent me, however, the result seems to be the same. The header is only transparent once I start scrolling. When the page loads though, I cannot see a transparent header and this does not look good on Mobile.

    Could you please take a look at this screenshot and let me know? Please note this problem is only with the responsive design and not with the normal design. Thanks

    You can refer to the following link: www.activeroots.co

    Thanks

    Shyam


  •  8,470
    Tahir replied
    September 4, 2017 at 12:17pm

    Hey Again,

    The Mobile header can only be transparent if you use the "Header Permanent Transparent" Option in here : http://prntscr.com/ggwh98 . 

    Be.st

    ThemeNectar Support Team 

  •  1
    Shyam replied
    September 6, 2017 at 12:28pm

    Hi Tahir,

    I have made the changes regarding the mobile header transparency, the header seems to be overlapping with the slider. Attaching the screenshot for your reference. Please let me know if there is any other way to fix this.

    You can refer to the following link: www.activeroots.co

    Thanks

  •  8,470
    Tahir replied
    September 6, 2017 at 12:33pm

    Hey Again,

    This is how the header is supposed to look  on the Mobile with "Header Permanent Transparent Option" Selected. If it is not per your liking kindly uncheck it . 

    Be.st 

    ThemeNectar Support Team