The mix-blend-mode has no impact on any element

Despite my efforts to find solutions online, my CSS is refusing to cooperate even after trying various methods that worked for others.

Here, you can view a JSFiddle where I have replicated the issue: I am aiming for the side navigation to be visible on the black sections as well.

HTML
<div class="sidenav">
  <a href="#" class="selected">Section 1</a>
  <a href="#">Section 2</a>
  <a href="#">Section 3</a>
</div>

<div class="content">
  <div>
    <p>Some text<p>
  </div>
  <div class="blk">
    <p>Some text<p>
  </div>
  <div>
    <p>Some text<p>
  </div>
</div>


CSS
.sidenav {
  width: auto;
  position: fixed;
  z-index: 1;
  top: 150px;
  padding: 8px 0;
}

.sidenav a {
  clear: both;
  float: left;
  position: relative;
  left: -20%;
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;

  text-decoration: none;
  text-align: right;
  font-size: 24px;

  border-style: solid;
  border-width: 2px;
  border-color: #0D0D0D;
  border-radius: 0 5px 5px 0;

  color: #0D0D0D;
  mix-blend-mode: difference;
}

.blk {
  background-color: #0d0d0d;
  color: #ffffff;
}

Answer №1

Is this the style you were looking for?

html {
  scroll-behavior: smooth;
  background: #fff;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;

  background-color: #ffffff;
  color: #0d0d0d;
}

/**********************************************/

.section {
  width: 100vw;
  max-width: 100%;
  background-color: #ffffff;
  text-align: center;

  margin: 0;
  padding: 15vh 0;
  position: relative;
}

.blk {
  background-color: #0d0d0d;
  color: #ffffff;
}

/**********************************************/

.sidenav {
  width: auto;
  position: fixed;
  z-index: 1;
  top: 150px;
  padding: 8px 0;
  mix-blend-mode: difference;
}

.sidenav a {
  clear: both;
  float: left;
  position: relative;
  left: -20%;
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;

  text-decoration: none;
  text-align: right;
  font-size: 24px;

  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  border-radius: 0 5px 5px 0;

  color: #fff;
  background-color: #000;

}

.sidenav a:hover {
  left: -2px;
}

.sidenav a.selected {
  left: -2px;
  color: #000;
  background-color: #fff;
  cursor: default;
}
<!doctype html>
<html>
<head></head>

  <body>

    <div class="sidenav">
      <a href="#" class="selected">&emsp;&emsp;Section 1</a>
      <a href="#">&emsp;&emsp;Another Section</a>
      <a href="#">&emsp;&emsp;Last One</a>
    </div>

    <div class="content" onclick="closeMenu()">
      <div class="section" id="works">
        <p>Some text<p>
      </div>
      <div class="section blk" id="works">
        <p>Some text<p>
      </div>
      <div class="section" id="works">
        <p>Some text<p>
      </div>
      <div class="section blk" id="works">
        <p>Some text<p>
      </div>
      <div class="section" id="works">
        <p>Some text<p>
      </div>
    </div>
  </body>
</html>

You can achieve the desired effect by adding mix-blend-mode to the parent element like sidenav, and then adjusting the background, color, and border-color properties in the a elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to apply a class to the 'td' element for two specific columns?

I have a rendered row from a database echo "<table border='1' cellpadding='10'>"; echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th></th> <th></th> ...

Combining labels over multiple lines using lower division

I have a setup where I am using two DIVs, one positioned below the other. The top DIV contains a Multiline Label that dynamically generates data. However, when the data in the label exceeds a certain length, it does not create space and instead overlaps w ...

Tips for ensuring the correct size of images and their captions within a figure element

I'm struggling with the CSS for an image inside a figure. Here is the HTML: #content figure { display: inline-block; border: 1px solid #333333; height: 200px; margin: 10px; } #content img { height: 180px; background-size: auto 100%; b ...

CSS is effective when styling table elements such as 'tr' and 'td', but encounters issues when trying to include 'th'

I have a variety of tables on my website, most of them without borders. However, I want to add borders to some of them. In my CSS, I am using a specific class for those tables: table { padding: 2px; border-collapse: collapse; table-layout: auto; te ...

Tips for resolving errors caused by posting an HTML element and preventing it from executing

I am currently troubleshooting my website and have noticed that when I post HTML, CSS, and PHP code using the article post function, it runs as posted. How can I prevent this from affecting my website in the future? For example: Submitting something like ...

The alignment of the navigation menu disrupts the functionality of the dropdown sub-menus

I'm finding it challenging to center the navigation menu while maintaining the functionality of the drop-down li elements. Here is my demo: http://jsbin.com/tosayosino/1/edit?html,css,js,output Removing the float:left; property from .jetmenu li succ ...

Images in assets folder are not showing up in Vue Bootstrap

I'm attempting to showcase an image similar to the example provided in this guide Below is the code I am using: <template> <b-container fluid class="p-4 bg-dark"> <b-row> <b-col> <b-img rounded="ci ...

Customizing the appearance of individual columns in the Material-UI DataGrid

My goal is to center an IconButton within a DataGrid table, all of which are MUI components. Despite reading the documentation and trying various methods, I haven't achieved the desired result yet. In my latest attempt, I implemented the following: G ...

What is the process for implementing a CSS theme switch in a CHM file and ensuring that it remains persistent?

Welcome to my tech world Greetings! I am a tech writer with a side interest in scripting JavaScript/jQuery for our help file (CHM file). While I consider myself a beginner in JS scripting, I have ventured into the realm of dynamic theme swapping within CH ...

The issue of assigning Ajax data to jQuery inputs with identical classes is not being resolved correctly

I am currently developing an Invoicing System where the Rate(Amount) value changes automatically when the Product(Item) is changed. The issue I am encountering is that when I change the first Product, all the other Product Rates change to the Rate of the ...

Unable to adjust the width of a table column within a horizontally scrollable container

I am struggling to resize the columns of a large table with 20 headers. Despite trying to place the table inside a div with overflow:auto, I still cannot achieve horizontal scrolling or make the div expand when resizing the columns. A sample code snippet ...

When my webpage is opened in Firefox, I notice that it automatically scrolls down upon loading

I recently embarked on the task of building a website from scratch but ran into an unusual bug in Firefox. The issue causes the page to scroll down to the first div, completely bypassing its margin. I want to clarify that I am not seeking a solution spe ...

What is the best approach to implement a basic image upload functionality?

I have a vision for my new website where users can upload an image with the click of a button, store it locally on one page and then retrieve its absolute URL to share on forums or other websites for preview purposes. While I've managed to create a fu ...

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

Get rid of the Border on Bootstrap 5 Accordion Button

Upon inspecting the Bootstrap 5 accordion, I noticed an outline that I would like to remove. I believe the element responsible for this outline may be the button. Despite attempting to target all possible elements with the following code: .accordion-item, ...

What is the method for placing a badge above a Font Awesome icon?

Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this: However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt ...

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

What is preventing Google Chrome from automatically breaking?

I seem to have made a mistake in this document, but I can't quite pinpoint what it is. There isn't much content in here yet as I am still in the process of building it for a WB. Interestingly, it works in Internet Explorer but not in Google Chrom ...

Avoiding the fontawesome icon within a Bootstrap button from being the only item to wrap to the next line

Explore a straightforward Bootstrap 4 button featuring a fontawesome icon. If this button is situated in a container that happens to be slightly smaller than its default width, the icon will shift to the next line. body { padding: 20px; } <link ...

using javascript to dynamically color rows in a table based on the value in the status field

Hi, I'm new to javascript and seeking help for my table coloring issue. I have a dynamic table where data is inserted through an Ajax call. The goal is to color specific records based on their status. I attempted a solution but only one record gets c ...