adding .not-dark class to transparent-header on hover

Question

Thank you for such a great and versatile template!

I am using dark transparent headers on pages with parallax or sliders that include-header with the data-sticky-class="not-dark" which makes the header have a white background and dark nav links instead of transparent background with white nav links when the page scrolls.

This works great and transitions nicely on page scroll, but I would also like the same .not-dark class with the same header transitions when any part of the header is hovered, including the logo and top-bar. (similar to the bain.com nav on hover).

What changes to the code are required to make this work?

fyi, making private bc of the link to bain, not sure if that is right since it is not my site. thanks again!!!

SemiColonWeb · Accepted Answer

Hello, You can consider adding the following JS Code at the bottom of the Page: [ch pre] jQuery(document).ready(changeHeaderColor); jQuery(window).on('resize',changeHeaderColor); function changeHeaderColor(){ if (jQuery(window).width() 991.98) { jQuery( " header" ).hover( function() { if (!jQuery(this).hasClass("sticky header")) { jQuery( this ).removeClass( "transparent header dark" ).addClass('not dark'); } SEMICOLON.Base.setBSTheme(); }, function() { if (!jQuery(this).hasClass("sticky header…

bree · Answer

Thank you! this worked beautifully on the home page slider, but not so smoothly on parallax page headers. would you take a look? https://www.bostonacademic.com/ canvas/ 1 about us.html thank you!!

Semicolon Web · Answer

Hello, Add the following code: [ch pre type="css"].is expanded menu header + .page title parallax.include header .container { z index: 5; padding top: 0 !important; }[/ch pre] This will definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any furth…

bree · Answer

Thank you so much for this.
I am having some trouble on pages with the parallax bg. see here
https://www.bostonacademic.com/layouts/about/our-company

Also, The client would like the background for the logo and mobile nav to stay mostly transparent on mobile devices rather than have the background color.

Can you help? thanks again!!!

bree · Answer

and, before you go to a fix for that. Maybe parallax isn't the best option?
They want site-wide, on the homepage big slider and the page headings, background images with opacity-50 to gently zoom in, ken burns style.
I was using the slider and just loading one, but I am sure that is a lot of stuff to load for a background image.
What would you suggest is the cleanest and lightest way to achieve this?
Thank you again and again!!

bree · Answer

Hello again. The client would like the mobile nav to remain transparent, or mostly transparent when in small screens. I tried just changing the background color to a transparent black but it did not work.
Please advise and thank you again!!!