0

I'm editing a wordpress site locally. for the menu i use jquery.dropotron from ajlkn. That works great. Now I'm trying to give the 7th child of the navPanel a new class. Something is preventing the transfer. I don't know what though. Here in the snippet it works. Does anyone have an idea why the class isn't added to Panel Art? maybe there is also the possibility to place a span with class around Link 4.1.

$(document).ready(function() {
 $('#navPanel nav a:nth-child(7)').addClass('modal-toggle');
});
@charset "utf-8";
@font-face {
  font-family: 'Font Awesome 5 Free';
}
a {text-decoration: none;}
#header {
  background: #fff;
  color: #000;
  left: 0;
  height: 13vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 998;
  cursor: default;
  transition: transform .5s .2s ease-in-out;
  border-bottom: 1px solid #ccc
}
.flex-head {
  height: 13vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 80%
}
.logo {
  margin-top: 5px;
  width: 85%;
  left: 10%
}
#header a {
  color: #000;
  border-bottom: 0
}
a:active, a:focus {
  outline: 0
}
.down #header {
  transform: translate3d(0, -10em, 0)
}
#header a[href="#navPanel"] {
  text-decoration: none;
  padding: .1em 3em;
  display: none
}
#header a[href="#navPanel"]:before {
  display: inline-block;
  font-size: 1.5rem;
  color: #000;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900
}
#header a[href="#navPanel"]:before {
  content: '\f0c9';
  line-height: inherit
}
.flex-head > nav > ul {
  align-items: center;
  display: flex;
  list-style-type: none
}
.flex-head > nav > ul > li {
  padding: 0;
  font-family: Open-Sans-Regular;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  opacity: 1
}
.flex-head > nav > ul > li:focus {
  font-weight: 600
}
.flex-head > nav > ul > li > ul {
  display: none;
  user-select: none;
  position: absolute
}
.flex-head > nav > ul > li a {
  display: block;
  height: inherit;
  line-height: inherit;
  padding: 0 1em;
  margin: 0 .5em
}
.flex-head > nav > ul > li a:focus, .flex-head > nav > ul > li a:hover {
  color: #c00000
}
.flex-head > nav > ul > li a.icon:before {
  margin-right: .5em
}
.flex-head > nav > ul > li a.button {
  font-size: 1em;
  height: 2.6em;
  line-height: 2.5em;
  padding: 0 1.65em;
  margin: 0 1em
}
.flex-head > nav > ul > li:last-child a {
  margin-right: 0 !important
}
.dropotron {
  background-color: #c00000;
  border-radius: .5em;
  list-style-type: none;
  width: 16.5em;
  padding: .5em 0;
  -webkit-box-shadow: 5px 2px 5px 0 rgba(0, 0, 0, .5);
  -moz-box-shadow: i5px 2px 5px 0 rgba(0, 0, 0, .5);
  box-shadow: 5px 2px 5px 0 rgba(0, 0, 0, .5)
}
.dropotron.level-0 {
  margin-top: 2.5em
}
.dropotron.level-0:before {
  transform: rotate(45deg) !important;
  background-color: #c00000;
  content: '';
  height: .75em !important;
  position: absolute;
  left: 2em;
  top: -.375em;
  width: .75em
}
.dropotron li {
  border-top: solid 1px rgba(255, 255, 255, .5);
  padding: 0;
  position: relative
}
.dropotron li:first-child {
  border-top: none
}
.dropotron li.active > a {
  color: #fff !important;
  background-color: #c00000
}
.dropotron a {
  transition: none;
  color: #fff;
  padding: .5em 1em;
  border-bottom: 0;
  font-family: Open-Sans-Regular;
  font-size: 1rem;
  letter-spacing: .01em;
  text-transform: uppercase
}
.dropotron a:hover {
  color: #c00000 !important;
  background-color: #fff
}
#navPanel {
  transform: translateX(100%);
  transition: transform .5s ease, box-shadow .5s ease, visibility .5s;
  background: black;
  box-shadow: none;
  color: #d6d6d6;
  height: 100%;
  max-width: 80%;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;
  width: 22em;
  z-index: 10005;
  display: none;
  font-family: Open-Sans-Regular;
  font-size: 1rem;
  line-height: 2rem;
  letter-spacing: .01em;
  text-transform: uppercase
}
#navPanel.visible {
  transform: translateX(0);
  box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, .2);
  visibility: visible
}
#navPanel nav {
  padding: 3em 2em
}
#navPanel .link {
  transition: color .2s;
  border-top: solid 1px rgba(255, 255, 255, .15);
  color: inherit !important;
  display: block;
  padding: .75em 0;
  border-bottom: 0
}
#navPanel .link:first-child {
  border-top: 0
}
#navPanel .link.depth-0 {
  color: #fff !important;
  font-weight: 600
}
#navPanel .link:active, #navPanel .link:focus, #navPanel .link:hover {
  color: #f3a3a3 !important
}
#navPanel .link .indent-1 {
  display: inline-block;
  width: 1.25em
}
#navPanel .link .indent-2 {
  display: inline-block;
  width: 2.5em
}
#navPanel .close {
  text-decoration: none;
  transition: color .2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  color: #adadad;
  cursor: pointer;
  display: block;
  height: 3.25em;
  line-height: 3.25em;
  padding-right: 1.25em;
  position: absolute;
  right: 0;
  text-align: right;
  top: 0;
  vertical-align: middle;
  width: 7em
}
#navPanel .close:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900
}
#navPanel .close:before {
  content: '\f00d';
  font-size: 1.25em
}
#navPanel .close:hover {
  color: #fff
}
@media screen and (max-width:1366px) {
  .dropotron {
    width: 17em
  }
}
@media screen and (max-width:1280px) {
  .logo {
    margin-top: 5px;
    width: 80%
  }
  .dropotron {
    width: 17em
  }
}
@media screen and (max-width:1500px) {
  #header {
    height: 12vh
  }
  .flex-head {
    width: 85%
  }
  .logo {
    width: 70%
  }
  #header a[href="#navPanel"] {
    display: block
  }
  #header a[href="#navPanel"]:before {
    float: right;
    font-size: 2.8em;
    transform: scaleX(1.5);
    margin-right: 1em;
    margin-top: -2.5em
  }
  .flex-head > nav {
    display: none
  }
  #navPanel {
    display: block
  }
}
@media screen and (max-width:1366px) and (orientation:landscape) {
  .flex-head > nav {
    display: none
  }
  #header a[href="#navPanel"]:before {
    float: right;
    font-size: 2em;
    margin-right: 1em;
    margin-top: -3.2em
  }
  .custom-logo {
    width: 100%;
    height: 100%
  }
}
@media screen and (max-width:800px) {
  #header {
    height: 10vh
  }
  .flex-head {
    height: 10vh;
    width: 85%
  }
  .logo {
    margin-top: -7px;
    width: 70%
  }
  #header a[href="#navPanel"] {
    display: block
  }
  #header a[href="#navPanel"]:before {
    float: right;
    font-size: 1.5em;
    transform: scaleX(1.5)
  }
}
@media screen and (max-width:768px) {
  #header a[href="#navPanel"]:before {
    margin-top: -2.5em
  }
  .logo {
    margin-top: 10px;
    width: 60%
  }
}
@media screen and (max-width:736px) {
  #header {
    height: 15vh
  }
  .flex-head {
    height: 15vh;
    width: 90%
  }
  .logo {
    margin-top: 5px;
    width: 40%
  }
  #header a[href="#navPanel"]:before {
    float: right;
    font-size: 1.2em;
    transform: scaleX(1.5);
    margin-right: 1em;
    margin-top: -1.9em
  }
}
@media screen and (max-width:480px) {
  #header {
    height: 10vh
  }
  .flex-head {
    height: 10vh;
    width: 90%
  }
  .logo {
    margin-top: 5px;
    width: 45%
  }
  #header a[href="#navPanel"]:before {
    float: right;
    font-size: 1.2em;
    transform: scaleX(1.5);
    margin-right: 0;
    margin-top: -2.1em
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>
<div id="navPanel" class="visible">
<nav>
<a class="link depth-0" href="#"><span class="indent-0"></span>Link 1</a>
<a class="link depth-1" href="#"><span class="indent-1"></span>Link 1.1</a>
<a class="link depth-1" href="#"><span class="indent-1"></span>Link 1.2</a>
<a class="link depth-0" href="#"><span class="indent-0"></span>Link 2</a>
<a class="link depth-0" href="#"><span class="indent-0"></span>Link 3</a>
<a class="link depth-0" href="#"><span class="indent-0"></span>Link 4</a>
<a class="link depth-1"><span class="indent-1"></span>Link 4.1</a>
<a class="link depth-0" href="#"><span class="indent-0"></span>Link 5</a>
<a class="link depth-0" href="#"><span class="indent-0"></span>Link 6</a>
</nav><a href="#navPanel" class="close"></a></div>

screenshot of the missing class in the inspector

screenshot of the missing class in the inspector

knefie
  • 95
  • 9
  • The code in your snippet is working. – imvain2 May 03 '23 at 16:39
  • @imvain2 yes, you are right. it's working, because jQuery is not used within WordPress. See my answer below. – Ferris May 03 '23 at 16:46
  • 1
    @Ferris, your answer doesn't address jquery not being used in Wordpress. Your answer addresses referencing jQuery via jQuery vs $. But either way, it has to be used. – imvain2 May 03 '23 at 17:16
  • @imvain2: Thank you for pointing that out. I updated my answer. I should have considered that. I just assumed the OP knew this. I'm pretty new here and there's still a lot to learn. – Ferris May 03 '23 at 19:28

1 Answers1

1

One problem could be the $ identifier. In WordPress you have to use jQuery like in the following examples. See here for a great reference: https://stackoverflow.com/a/15132734/20896315

jQuery( document ).ready( function() {
   jQuery( '#navPanel nav a:nth-child(7)' ).addClass( 'modal-toggle' );
});

or alternatively you can write:

jQuery( document ).ready( function( $ ) {
   $( '#navPanel nav a:nth-child(7)' ).addClass( 'modal-toggle' );
});

UPDATE - Thank you to @imvain2 for pointing that out:

Another problem could be that jQuery is not loaded at all. So be sure to enqueue jQuery first. It comes built in to WordPress but doesn't come 'pre-activated'. If you don't know how to do that, here are some great references again:

https://stackoverflow.com/a/14201306/20896315
https://stackoverflow.com/a/22239396/20896315

Ferris
  • 667
  • 6
  • 16