I have a fixed menu which consists of multiple elements. I am trying to find a way to have all these elements change colour depending on the background colour.
The elements are a
#page::before,
.logo-scroll
both of these elements have a white border (no fill)
The links of the main navigation .main-navigation and their borders are white
The logo which is white. I also have a black version.
My site is made up of 3 section colours, black, white and yellow.
I would like the items to switch to black when the background sections are either yellow or white.
The website is very much a work in progress but you can see it here: https://www.sheree-new.shereewalker.com
I have tried this for the logo
https://eduardoboucas.com/blog/2017/09/25/svg-clip-path-logo-colour.html
but could not get it to work. I tried mix-blend mode for the elements but it makes the lines blue when on the yellow. I tried to do mix-blend-mode and THEN use the desaturate or greyscale filter but with no luck.
This is perhaps too much to tackle in one question but I thought perhaps there was a plugin that handled this in Wordpress?
The header which contains the left and right nav elements:
<div class="logo-scroll">
<div class="scroll-text">
<a href="/home"><img width="53px" height="260px" src="/wp-content/uploads/2019/07/sheree-walker-web-design-edinburgh-vertical-01.svg"/></a>
</div>
</div>
<header id="masthead" class="site-header">
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'sheree_walker' ); ?></button>
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
The CSS
header#masthead {
height: calc(100vh - 60px);
width: 75px;
position: fixed;
float: right;
right: 30px;
top:30px;
}
#site-navigation {
transform: rotate(90deg);
transform-origin: top left;
position: relative;
right: -75px;
width: calc(100vh - 60px);
}
.main-navigation li {
float: left;
position: relative;
text-align: center;
width: 33.33%;
padding: 23px 20px 21px 20px;
font-size: 23px;
font-family: 'NeurialGrotesk';
}
.main-navigation li {
border-bottom: 2px solid white;
}
.main-navigation li:nth-child(n+1) {
border-right: 2px solid white;
}
.main-navigation a {
color: white;
letter-spacing: .5px;
}
#page::before {
content: "";
position: fixed;
top: 30px;
bottom: 30px;
left: 30px;
right: 30px;
border: 2px solid white;
pointer-events: none;
}
.logo-scroll {
position: fixed;
left: 30px;
top: 30px;
bottom: 30px;
border: 2px solid white;
width: 75px;
}
.scroll-text {
position: fixed;
}
All the sections have classes of either yellow or white - the default background is black.
Any help or advice on a suitable plugin would be great.
**Edit - something like this would be perfect if it applied to background colours
https://github.com/kennethcachia/background-check
I have also just tried this which sort of works but also generates a background colour at random
contrast();
function contrast() {
var R, G, B, C, L;
$( "main-navigation a" ).each(function() {
R = (Math.floor(Math.random() * 256));
G = (Math.floor(Math.random() * 256));
B = (Math.floor(Math.random() * 256));
$( this ).css( 'background-color', 'rgb(' + R + ',' + G + ',' + B + ')' );
C = [ R/255, G/255, B/255 ];
for ( var i = 0; i < C.length; ++i ) {
if ( C[i] <= 0.03928 ) {
C[i] = C[i] / 12.92
} else {
C[i] = Math.pow( ( C[i] + 0.055 ) / 1.055, 2.4);
}
}
L = 0.2126 * C[0] + 0.7152 * C[1] + 0.0722 * C[2];
if ( L > 0.179 ) {
$( this ).css( 'color', 'black' );
} else {
$( this ).css( 'color', 'white' );
}
});
}
from Change multiple elements colour based on background colour
No comments:
Post a Comment