Transparent header with rollover colour

[FoundationDesign]

Hi,
I have a Themeco Pro staging site with this current setup for the menu… https://staging2.rdw.co.nz/home.

I’m using Headers and I’m wanting to replicate this menu setup… https://www.tftconsultants.com/

I have 2 problems. The first is that the RevSlider doesn’t see to ‘tuck under’ the menu and give me a full page. And second, I don’t how to create the 2 bar ‘switch-a-roo’ that I suspect that I need for the rollover effect.

Thanks in advance fro your time and advice.

[christian]

Hey @FoundationDesign,

Set you Header Bar to Position Absolute and set the Background to Transparent like the following screenshot. That should move the slider up as an Absolute Positioned bar or element does not take up space.

Not sure what you mean by ‘switch-a-roo’ but if you mean the scroll effect, that is not possible. You’d need to consult with a developer to write a custom code for that.

Hope that helps.

[FoundationDesign]

Thanks for your reply, Christian. That has sorted the slider up to the top.

The ‘switch-a-roo’ that I don’t know how to achieve is the roll-over as in this menu setup… https://www.tftconsultants.com/ How do I get the bar to appear on rollover?

While I have your attention… how do I edit the pop-out menu? I seem to be able to select it, but I can’t make any changes to it. I’m wanting white text on a blue background, again similar to the example at https://www.tftconsultants.com/.

[christian]

Hey @FoundationDesign,

Thanks for the clarification. The ‘switch-a-roo’ would require custom CSS since there’s no option available for it. You can add CSS specifically for the bar using the Element CSS. To demonstrate the Element CSS functionality, add the following sample in the Bar’s Element CSS.

$el.x-bar {
    transition: 1s;
}
$el.x-bar:hover {
    background: black;
}

Please just note though that what I’ve provided is a sample code. We do not actually provide custom codes as part of our theme support so in order for you to use that for your project, you need to learn CSS and also learn how to use the browser’s element inspector so you’ll see the element selectors to use with your CSS. If you don’t have time to learn those, you need to consult with a developer.

Regarding the menu, I believe you’re referring to the Off Canvas Area (screenshot below).

If that’s correct, click on Off-Canvas in the Nav element’s menu. You’ll see the design options under it.

Hope that helps.

[FoundationDesign]

@christian… oh my, it’s a beautiful thing. Thank you, your advice and direction is spot on. Thank you for the link to learn CSS. Wishing you a great day.

[friech]

Wish you a great day too, glad we could help.

Cheers!