New theme version breaks my existing CSS

(@sheeptest)

My live site is at https://study-ccna.com
It is running the old Education Hub version 1.9.7
The side menu on the left hand side works, you can expand the main menu items.

I’ve installed a staging site at https://wordpress-603168-1953238.cloudwaysapps.com/
I have upgraded the theme to the current Education Hub Pro version 3.5
The side menu on the left hand side does not work, you can’t expand the main menu items – when you click on them the sub-items are not shown.
This is the case with both Education Hub Pro version 3.5 and Education Hub version 2.3

Something in the current version of the theme is breaking my CSS which is applied to the left hand menu. Please let me know what I need to do to fix this. Thanks!

This is my CSS:

.single .byline {
display: none;
}

.entry-meta{
display: none;
}

.cat-links {
display: none;
}

.tags-links {
display: none;
}

.vcard{
	display: none;
	
}

.sidenav {
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  padding-top: 16px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a{
  padding: 6px 0px 0px 0px;
  text-decoration: none;
  font-size: 16px;
  color: #294a70;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.dropdown-btn {
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 16px;
  color: white;
  border: none;
  background: #294a70;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over 
.sidenav a:hover, .dropdown-btn:hover {
  color: #6081a7;
}
*/

/* Add an active class to the active dropdown button
.active {
  background-color: white;
  color: #6081a7;
}
 */
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: white;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

Theme Author

WEN Themes

(@wenthemes)

5 years ago

@sheeptest : I just check your main site and the staging new site which has problem. That left side menu script is not from the theme. It’s from your custom script that you have in your site https://study-ccna.com/. I found the following script in this site footer. So, you can install plugin like “Head and Footer Scripts Inserter” or “Insert Headers and Footers by WPBeginner” and add the following script in Footer.

<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>

Thread Starter

sheeptest

(@sheeptest)

5 years ago

Fixed – thanks very much for your help!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘New theme version breaks my existing CSS’ is closed to new replies.