Transparent header makes page title go behind it – how to fix?

[KimG]

#443462

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]

#443465

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]

#494968

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

[KimG]

#495045

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]

#498994

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]

#531519

Hi KimG

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

Cheers
Jim

[BigRedBarnDesign]

#674023

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

[billfinch]

#676443

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;
  }
}

[Ammar. S]

#676513

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

[mollenbu77]

#864684

Ammar,

I read the article you posted on “header position and transparency”. After making sure all header options (global and page) are set to solid color (with no transparency) for background color, the PTB image still sits behind the page header. Therefore cutting off part of the image. Is this a bug with Avada 7.3? Do you recommend using “margin-top” in CSS to push the image down?

I followed the instructions in the article. Maybe I am doing something wrong. Please help

Thanks
Mark

[neptune-media]

#871609

Ammar,

This header transparency is a head scratching way to program header behavior. I can’t think of one site where I’d want a header ON TOP of a slider, except maybe at the very top. The vast majority of sites with sliders on the homepage have that slider BELOW the header or no header at all. The sites I’ve made with full sized sliders have any text ON TOP of the slider and certainly not the header overlaying it. You should have this transparent header/slider as a separate option to choose, not the default. It shouldn’t matter if my header is slightly transparent or not… content should obviously never be showing up UNDERNEATH any header.

BTW I’m having the same issue as these other people, I’ve changed the transparency in Global Options and my content is STILL showing up underneath the header. This is really frustrating that you’ve programed Avada this way.

[stphnwlkr]

#871610

@Neptune Media – This is not unique to Avada. The transparent header is an absolute positioned container which moves it out of the document flow and the relative positioned content moves to the top of the page (below it). This is normally to allow an image or slider to appear below the header and navigation. If you have content at the top, you need to use padding to adjust for the space of the header.

[neptune-media]

#871623

@Steve – I’ve looked at this extensively last night and this morning. I understand that this setting is to take full page sliders into account, but a full page slider is a subset of what people have on their pages and usually only on the homepage. Avada has taken a main element, the header, and changed the way background color opacity works.

All I want to do is change the header bg to a slightly opaque white so the page background image barely bleeds through, like a watermark. But when I make that change, all the main content slides to the top of the page, underneath the header, obscuring some content. When that bg is a full color, the main content appears correctly below the header. This is what I see as a problem. Changing the style of a main element should not have an effect on the layout of an entire page, it should be a simple element setting as it is in normal HTML. If someone wants the header floated on top of all the page content that should be a separate setting/choice. Element styles and page layouts are two different things.

I initially got around this by adding margins/padding to the top of the content, which is fine on desktop/tablets but a problem on mobile because those margins start BELOW the header, not from the top of the page, leaving a huge gap between the header and the content.

Can’t I just get around all this by adding separate CSS targeting the header bg color?

[neptune-media]

#871624

Avada has taken a basic style setting of a main element and essentially deactivated it, changing it’s behavior to affect the page layout. Floating menus and headers above full page sliders and images is fairly common, but using an element style setting to achieve that is not and not the way valid HTML works. There should be a specific choice to float that header or not, separate from the style of the element.

[Author]

Posts