Important notice: we will respond to all open ticket requests up until November the 1st. After this date, we will be unable to process the ticket requests here on Ticksy.

Okay
  Public Ticket #1839454
Transparent Header
Closed

Comments

  •  1
    thestable923 started the conversation

    Hello - 

    I've set my Elated Options > Header options in an attempt to create a transparent header that turns solid when a user scrolls, but it doesn't appear to be working. Here's what I've tried:

    1. Setting the global options to background color: #fff, and transparency: 0;

    2. Ensured the page in question is not using special settings within the in-page Elated Header options.

    While the color of the header changes as expected, the transparency option appears to be doing nothing at all on either the home page, or custom internal pages.


    Am I missing something? The goal is to have the header function like the demo:

    http://superfood.elated-themes.com/ 


    Thank you!!


  •  1,845
    Elated replied

    Hello,

    Regarding the issue with Transparent Sticky header just go to Theme Options >> Header >> navigate to Sticky Header and then set any Background color >> and Background Transparency to 0.

    4996100567.png


    In order to achieve a Transparent (Standard) Header layout, you need to navigate to Theme Options > Header Standard and set these two options:
    - Background color > (any color, but it's required)
    - Background transparency > set to 0

    Also note that these are Global Options. And each page these same options from above, and if set on the page, it will override Global Options..

    So you need to go to Dashboard > Pages > find and Edit single page >  scroll towards the bottom > check if these two options are set already.

    For any other issue you are facing please feel free to ask us and we will assist you as soon as possible. I will give my best to help you building your site.

    Thanks & Regards, 
    Vlada



    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  •  1
    thestable923 replied

    Hello, thank you for your response.

    I followed your instructions, but for some reason the header is starting out solid, then going to transparent. Can you tell me how to accomplish a transparent header to start which turns solid on scroll like the Tea home page demo?


    Thank you!


    http://superfood.elated-themes.com/ 

  •  1,845
    Elated replied

    Hi there,

    I'm sorry for the late response, it's because of the weekend days and because of the Orthodox Christmas.

    I can not access your site to take a look what options did you set. Can you provide me access so I can take a look? Thanks! 

    You will have to set for the sticky menu background transparency to be 1 if you want solid color for the sticky menu. And I will have to take a look for the header how this is set on your side so I can provide you some solution. Thanks!  

    Best regards,

    Marie


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.

  •   thestable923 replied privately
  •  1,845
    Elated replied

    Hi there,

    Just paste this code in Appearance > Customize > Additional CSS:

    .eltdf-page-header .eltdf-fixed-wrapper.fixed {
        background-color: transparent;
    }
    

    But this means that your header will be transparent all the time, even on scroll. In this case, we can recommend you to use for example sticky on scroll up/down and then you can set your header to be transparent, but when it's on sticky mode to have some color. 

     Please try to follow the instructions from this link in order to solve these Cross-Origin errors: 

    https://davidwalsh.name/cdn-fonts
    These instructions work for all browsers and icon packs.
    Basically you need to add few lines of code inside of a .htaccess file and it is better to ask you host to do that for you in case that you are not feeling comfortable doing that:

    <IfModule mod_headers.c>
      <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>

    Most of the users were able to solve this cross-origin problem with the solution from that article, but if that does not work for you, you will need to contact your hosting provide support and ask them to fix the Cross-Origin issue, as it is server oriented.

    Best regards,

    Marie


    The Elated Support Center has been moved to our centralized support platform. 

    Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time. 

    If you wish to submit a new support request, for all new inquiries please head on to our Help Center.

    Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.

    Don’t forget to sign up for our newsletter and be the first to find out all the latest news.