Duplicated header behaves differently

[mgiraud]

Hi. Working on a site where I have a semi-transparent header that looks just how I want on the home page. I want to use the same header for all interior pages – BUT not full width (the only change) – so I’ve duplicated it and adjusted Conditions so both headers apply to different pages.

The problem is that even without making any changes, the header appears differently when assigned to interior pages. I could work around that and reassign all the styles, but I’m sure I shouldn’t have to do that.

More frustratingly, I can’t get the header to NOT be full-width (and stay within the Global Container).

Any ideas?

[ruenel]

Hey Matt,

Thanks for writing in!

Do you want something like this?

You have to set the background color of the Bar element to transparent and set the maximum width to 1200 pixels only.

You can then add any background color to the Container element.

Kindly let us know how it goes.

[mgiraud]

Thanks so much for the quick response! Unfortunately, when I try your settings, I still see part of the header stretching viewport full-width – with both the page you had in your screen shot, and one of the actual pages. (I turned the container green for easier ID) Any ideas?

(I’m working in Arc Version 1.53.0 (52080), Chromium Engine Version 127.0.6533.73)

[ruenel]

Hey Matt,

Please check your custom header because you have added a custom CSS:

.x-bar.x-bar-absolute{
background-color: rgba(255,255,255,0.85) !important;
    transition: background 0.5s ease;
}

.x-bar.x-bar-fixed{
   background-color: rgba(255,255,255, 1) !important; 
}

Removing the CSS and disabling the Box Shadow should give you what you want to display.

Thanks.

[mgiraud]

Fantastic! Thanks, Rue.

Is there a way to replicate that CSS in Effects? That is, once you scroll and the header hits the top of the viewport, it goes from .85 to 1 opacity? again, thx!

[ruenel]

Hey Matt,

You will have to update your custom CSS adding the .container in it. For example;

.x-bar.x-bar-fixed .x-bar-container {
     /* your attribute properties here */
}

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[mgiraud]

Got it. Thanks so much for the great support, Rue.

[tristup]

Hi Matt,

Glad that we are able to help you.

Thanks