Home Forums Community Forum Transparent header makes page title go behind it – how to fix?

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • KimG
    Participant
    Post count: 7

    Hi. I am wanting to use the slider on a few pages but not all so have made the header slightly transparent as advised in the instructions. The result on all of my other pages is that they are now behind the header. How do I move them down – or stop this from happening on pages without a slider? Thanks

    KimG
    Participant
    Post count: 7

    So far if I increase the page title bar height to 400 px I can move it down, however, how do I now move the text down to the bottom of the page title bar (rather than it being in the middle?).

    ondi
    Participant
    Post count: 1

    I am having the same problem. Please post a solution.

    KimG
    Participant
    Post count: 7

    Hi Ondi. I worked it out in the end. You need to change the opacity setting for that page only rather than for the whole site on through the Avada theme options. So leave the opacity in the Avada theme options as normal. Then on the page that you want to put the header scroll to the bottom where it says fusion page options and choose the header tab and drop the opacity there. Also, I think you need to go to page title bar tab and turn it off if your other pages have title bars on them. {I am not an expert in any manner just fumbling through but this worked for me}

    brandyqk
    Participant
    Post count: 3

    Adjust the sizes to your own theme. But here’s what I used to solve this issue.

    /*PAGE TITLE FIX*/
    @media only screen and (min-width: 800px)  {
    
    .fusion-page-title-bar {
        height: 200px !important;
    }
    
    .fusion-page-title-captions {
        margin-top: 120px;
    }
    
    .fusion-page-title-secondary {
            margin-top: 120px;
    }
    
    }
    evatoacc1
    Participant
    Post count: 1

    Hi KimG

    Thanks for posting this fix, it worked perfectly for me after much head scratching.

    Cheers
    Jim

    BigRedBarnDesign
    Participant
    Post count: 1

    Thanks for help. Very confusing to resolve and trying to do so in theme options is impossible.

    billfinch
    Participant
    Post count: 1

    I set this with the following media query instead.

    It’s setting the position of the header to relative when it’s not mobile and doesn’t affect the sticky header, either.

    
    @media only screen and (min-width: 1101px) {
      html.avada-header-color-not-opaque .fusion-header-wrapper {
        position: relative !important;
        z-index: 10000;
      }
    }
    
    • This reply was modified 1 week, 5 days ago by billfinch.
    Ammar. S
    Keymaster
    Post count: 585

    Hello Everyone

    What you see here is actually the default behaviour of how header transparency works, it is to be used best when a slider is assigned to page so that your header can sit on slider perfectly, if a slider is not assigned to page and header is set as transparent, anything that is below the header will go under it in place of slider, this is mentioned in our header transparency doc post here as well => https://theme-fusion.com/documentation/avada/header/header-position-and-transparency/

    Thanks

    -Ammar

Viewing 9 posts - 1 through 9 (of 9 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.