4

I have created a sidebar widget using Divi sidebar module. HTML & CSS code is as below:

CSS:

.et_pb_sidebar_0.et_pb_widget_area {
    border:1px solid #A9A9A9;
}

.et_pb_sidebar_0.et_pb_widget_area .widgettitle {
    padding-left: 30px;
}

.our-work-side-menu ul li {
    box-sizing: border-box;
    margin: 0;
    border-top:1px solid #A9A9A9;
    width:100%;
    padding: 10px 0 10px 40px;
}

.our-work-side-menu ul li:hover {
    background-color: #529883;
}

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li a:hover {
    color: #ffffff;
    background-color: #529883;
}

.our-work-side-menu a:active {
    color: #ffffff;
    background-color: #529883;
}

HTML:

<div class="our-work-side-menu">
<ul >
    <li><a href="/our-work/completed-projects/">Completed Projects</a></li>
    <li><a href="/our-work/ongoing-projects/">Ongoing Projects</a></li>
    <li><a href="/our-work/future-projects/">Future Projects</a></li>
    <li><a href="/our-work/photo-gallery/">Photo Gallery</a></li>
    <li><a href="/our-work/video-center/">Video Center</a></li>
    <li><a href="/our-work/video-center/dr-asamoah-bio-video/">Dr. Asamoah Bio Video</a>    </li>
</ul>
</div>

divi sidebar preview

I am not able to get active link/menu item to change its background. I also want the Clicked Link to have the active link style and rest of the links stays the same.

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
Lalita
  • 43
  • 4

4 Answers4

2

Issues : You have not changed your background colors on hover and active states. See

.our-work-side-menu ul li:hover {
    background-color: #529883; /*Same Color */
}

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li a:hover { /* Repeated | Redundant CSS */
    color: #ffffff;
    background-color: #529883; /*Same Color */
}

.our-work-side-menu a:active {
    color: #ffffff;
    background-color: #529883; /*Same Color */
}

Fixes:

.et_pb_sidebar_0.et_pb_widget_area {
  border: 1px solid #a9a9a9;
}

.et_pb_sidebar_0.et_pb_widget_area .widgettitle {
  padding-left: 30px;
}

.our-work-side-menu ul li {
  box-sizing: border-box;
  margin: 0;
  border-top: 1px solid #a9a9a9;
  width: 100%;
}

.our-work-side-menu ul li a {
  color: #529883;
  display: block;
  height: 100%;
  text-decoration: none;
  padding: 10px 0 10px 40px;
}

.our-work-side-menu ul li a:hover {
  color: #ffffff;
  background-color: #529883;
}

.our-work-side-menu ul li a:active {
  color: #ffffff;
  background-color: orange;
}
 /* UPDATE: For clicked link behaviour we set an active class  */
 .active {
   background: orange;
   color: #ffffff !important;
 }

UPDATE :

JAVASCRIPT:

For Clicked Link to have the active style, we need to use a bit of CSS. I have come up with this code (though) there are many approaches :)

document.addEventListener("DOMContentLoaded", () => {
  let linksWrapper = document.querySelector(".links-wrapper");

  let hiddenLI = document.createElement("li");
  let anchor = document.createElement("a");
  anchor.setAttribute("class", "active");

  hiddenLI.appendChild(anchor);

  linksWrapper.appendChild(hiddenLI);
  hiddenLI.style.display = "none";

  const mainLinks = document.querySelectorAll(".links-wrapper li a");
  for (var i = 0; i < mainLinks.length; i++) {
    mainLinks[i].addEventListener("click", function () {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace("active", "");
      this.className = "active";
    });
  }
});

FULL WORKING CODE:

document.addEventListener("DOMContentLoaded", () => {
  let linksWrapper = document.querySelector(".links-wrapper");

  let hiddenLI = document.createElement("li");
  let anchor = document.createElement("a");
  anchor.setAttribute("class", "active");

  hiddenLI.appendChild(anchor);

  linksWrapper.appendChild(hiddenLI);
  hiddenLI.style.display = "none";

  const mainLinks = document.querySelectorAll(".links-wrapper li a");
  for (var i = 0; i < mainLinks.length; i++) {
    mainLinks[i].addEventListener("click", function () {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace("active", "");
      this.className = "active";
    });
  }
});
.et_pb_sidebar_0.et_pb_widget_area {
  border: 1px solid #a9a9a9;
}

.et_pb_sidebar_0.et_pb_widget_area .widgettitle {
  padding-left: 30px;
}

.our-work-side-menu ul li {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  border-top: 1px solid #a9a9a9;
  width: 100%;
}

.our-work-side-menu ul li a {
  color: #529883;
  display: block;
  height: 100%;
  text-decoration: none;
  padding: 10px 0 10px 40px;
}

.our-work-side-menu ul li a:hover {
  color: #ffffff;
  background-color: #529883;
}

.our-work-side-menu ul li a:active {
  color: #ffffff;
  background-color: orange;
}

.active {
  background: orange;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="our-work-side-menu">
      <ul class="links-wrapper">
        <li><a href="#">Completed Projects</a></li>
        <li><a href="#">Ongoing Projects</a></li>
        <li><a href="#">Future Projects</a></li>
        <li><a href="#">Photo Gallery</a></li>
        <li><a href="#">Video Center</a></li>
        <li>
          <a href="#">Dr. Asamoah Bio Video</a>
        </li>
      </ul>
    </div>
  </body>

  <script src="./script.js"></script>
</html>
Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
  • Thanks Imran for pointing that out. I did change the color but when the page is active the link background does not stay in the color I desire. It shows same as inactive links/menu items. For active link I want the text in white and the background in green. – Lalita Dec 21 '20 at 12:22
  • I have also updated some CSS. Due to specificity issue, it was not coming. The last CSS selector .our-work-side-menu ul li a:active { color: #ffffff; background-color: orange; } If you click on Run Code Snippet Button at the bottom of my answer. There is a working code. Active effect is there now. However if you need to make whole li active, I can also help with that. Check once – Imran Rafiq Rather Dec 21 '20 at 12:24
  • Yes that is what I want. The whole li to be in active mode and the color of its background should remain green while the page is open and the link text in white – Lalita Dec 21 '20 at 12:28
  • I updated the code. and That's done!!! And you have your functionality Friend. Do Accept the answer and Vote also for both the questioner and answerer to benefit from :) God Bless :) – Imran Rafiq Rather Dec 21 '20 at 12:30
  • Just click on Run Code Snipper button now. And you will see it working. Let me also vote you to improve your reputation, a small gift from me. :) Happy coding – Imran Rafiq Rather Dec 21 '20 at 12:32
  • I tried the code, it works on hover but active link does not have different color (organge) than other inactive links. Do I need to use some javascript for that? For what I am trying to achieve please visit https://www.ghanaministries.com/our-work/completed-projects/ and have a look at the sidebar – Lalita Dec 21 '20 at 12:39
  • Wait do one thing. Write !important at the end. .our-work-side-menu ul li a:active { color: #ffffff !important; background-color: orange !important; } – Imran Rafiq Rather Dec 21 '20 at 12:41
  • Mean while, let me see what you actually want. Because active state means a state when a user holds his mouse click, When the user leaves it, it no longer remains active. May be you want the clicked link to remain orange. – Imran Rafiq Rather Dec 21 '20 at 12:43
  • Yes, I want the clicked link to remain orange. How do I achieve that? – Lalita Dec 21 '20 at 12:49
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226242/discussion-between-imran-rafiq-rather-and-lalita). – Imran Rafiq Rather Dec 21 '20 at 12:49
0

You wrote that you 'Gave it class "#ghana-work-sidebar" ' but your CSS code is meant to change the ID. Try to assign the ID to your element in the HTML code like this instead:

<div id="ghana-work-sidebar"></div>
Moritz
  • 21
  • 4
  • Hello Moritz, thanks for the input. I have updated the question. Removed the class & ID conflict but I can't get active menu item to change its color. – Lalita Dec 21 '20 at 11:59
  • In this case your CSS code is correct. If it is still not working, your rule is overwritten by other conflicting rules. Read more about the CSS cascade here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance – Moritz Dec 21 '20 at 12:04
  • Try changing ".our-work-side-menu a:active" to ".our-work-side-menu ul li a:active" – Moritz Dec 21 '20 at 12:06
  • I don't need a javascript code to make this happen, do I? – Lalita Dec 21 '20 at 12:06
  • No Javascript needed, just pure CSS! – Moritz Dec 21 '20 at 13:01
0

That's because all the color codes you've used for different declarations are the same

.our-work-side-menu ul li:hover {
    background-color: #529883;
}

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li a:hover {
    color: #ffffff;
    background-color: #529883;
}

.our-work-side-menu a:active {
    color: #ffffff;
    background-color: #529883;
}

As it seems you want to invert the color on hover and active menu item, so my suggestion is your code should look like below

.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li:hover,
.our-work-side-menu ul li.active {
    background-color: #529883;
}

.our-work-side-menu ul li:hover a,
.our-work-side-menu ul li.active a{
    color: #ffffff;
}


$(document).ready(function () {
    $('.our-work-side-menu ul li').click(function(e) {

        $('.our-work-side-menu ul li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});
.our-work-side-menu ul li {
  box-sizing: border-box;
  margin: 0;
  border-top: 1px solid #a9a9a9;
  width: 100%;
  padding: 10px 0 10px 40px;
}
.our-work-side-menu ul li a {
    color: #529883;
}

.our-work-side-menu ul li:hover,
.our-work-side-menu ul li.active {
    background-color: #529883;
}

.our-work-side-menu ul li:hover a,
.our-work-side-menu ul li.active a{
    color: #ffffff;
}
<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>

      <body>
        <div class="our-work-side-menu">
          <ul>
            <li><a href="#">Completed Projects</a></li>
            <li><a href="#">Ongoing Projects</a></li>
            <li class="active"><a href="#">Future Projects</a></li>
            <li><a href="#">Photo Gallery</a></li>
            <li><a href="#">Video Center</a></li>
            <li>
              <a href="#">Dr. Asamoah Bio Video</a>
            </li>
          </ul>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      </body>

    </html>
Mehdi Shahamirian
  • 137
  • 1
  • 9
0

Divi theme assigns a menu class current-menu-item to all active li i.e. menu items. Target that along with the id of the particular sidebar widget with CSS. See the example below:

#menu-blog-categories.menu .current-menu-item>a {
color: #fff !important; background-color: #293852; }
Toby Speight
  • 27,591
  • 48
  • 66
  • 103
Lalita
  • 43
  • 4