Different color for nav/sitetitle on different pages

absent

Hi LAY-TEAM,

is there any easy solution to change the header color links (nav & sitetitle) based on the background of different pages?

I have different pages with darker backgrounds with white navigation and sitetitle and brighter background with black navigation and sitetitle.

Thank you!

alasdair17

@absent hey, this should help! it has instructions for changing the menu colours on different pages :)

https://laytheme.com/documentation/custom-css-styling.html

absent

Thank you very much, I understand. I'm sorry, I forgot to clarify – I would like to change the "first row" nav/sitetitle BLACK and the following rows to WHITE links.

Would this be possible?

alasdair17

@absent do you have a link to your website so I can see? sounds like it should be possible!

absent

My version is still on a local environment. I found this code in your forum, but isn't working 100% for me.

I add on the first row ".darkrow" as css class to make the nav/sitetitle black.

.white
{
color: #fff !important;
}

<script>
    var offset = 50;
    var $blackRows;
    var $nav;
    
    window.laytheme.on("newpageshown", function(layoutObj, type, obj){
        $blackRows = jQuery(".darkrow");
        $nav = jQuery("nav a, .sitetitle span");
        $nav.addClass("white");
    });
    
    jQuery(document).on("scroll", function(){
        $blackRows.each(function(){
            var rect = this.getBoundingClientRect();
            if(rect.top - offset < 0 && rect.bottom - offset > 0){
                $nav.removeClass("white");
                return false;
            }else{
                $nav.addClass("white");
            }
        });
    });
</script>

alasdair17

hmm could you explain a bit further about what you mean when you say "first row" in relation to the navbar?

it sounds like more than just the navbar/site title/menu item colours you want to change?

absent

I only want to change the sitetitle and navigation color from white to black (based in the row color that I define with ".darkrow"). I'm not sure if this is (easy) possible?

arminunruh

for rows for example, you can right click them in the gridder, click "set row html class and id" and add this class:

white

now add this to lay options -> custom css & html:

custom <head> content:

<script>
var $canbewhite = false

window.laytheme.on('newpageshown', function () {
	$canbewhite = jQuery('.white')
	addOrRemoveWhite()
})

var offset = 50;

jQuery(document).on('scroll', function () {
	addOrRemoveWhite()
})

var addOrRemoveWhite = function () {
	var isOneWhite = false
	if (!$canbewhite) return
	$canbewhite.each(function () {
		if (this.getBoundingClientRect().top - offset < 0 && this.getBoundingClientRect().bottom - offset > 0) {
			isOneWhite = true
		}
	})

	if (isOneWhite) {
		jQuery('body').addClass('white-header')
	} else {
		jQuery('body').removeClass('white-header')
	}
}
</script>

Important, we still need to add this CSS:

Custom CSS for Desktop Version:

/* your site title and navigation texts need to be black at first. then we invert them, when "white-header" class is added to the body */

/* invert your site title */
body.white-header .sitetitle{
	filter: invert(1);
}

/* invert your nav */
body.white-header > .laynav {
        filter: invert(1);
}

Custom CSS for Mobile Version:

/* optional: make mobile site title, burger and cart icon white */

body.white-header .burger-wrap {
	filter: invert(1);
}
body.white-header .lay-cart-icon-wrap {
     filter: invert(1);
}
body.white-header .mobile-title{
	filter: invert(1);
}

/* optional: make mobile things black again when mobile menu is opened */

body.white-header.mobile-menu-open .burger-wrap {
filter: invert(0);
}
body.white-header.mobile-menu-open .lay-cart-icon-wrap{
filter: invert(0);
}
body.white-header.mobile-menu-open .mobile-title{
filter: invert(0);
}

absent

It works perfect!!! Thank you very much!!!

arminunruh

i did some changes to the code,

for the phone version we also invert the burger, before i set the color: text color

this code doesnt inver the menu bar though
u can basically use the browser inspector, find out what things you want to invert additionally like if u want to invert the menubar too for example and write ur own css

arminunruh

i think many people just use
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

mix-blend-mode: difference;

on the menu and site title. but then you need to set your menu and site title to be white, and then it uses this difference effect which is an alternative to what we're doing here.

I also made a reel about this:

https://www.instagram.com/p/Cjm8eHkjiXA/

absent

Great, thank you very much. I think this will help many people.

Lay Theme Forum

Different color for nav/sitetitle on different pages

Before you post:

When you post:

Online Users