Menu icon Foundation
Dropdown Content - Changing Inline CSS For Active Class

I was wondering if anyone could help me. I want to change the inline CSS for Dropdown content. The content is being displayed above the link.

When active I want the content to be have this CSS: 'left:20%;'
I also do not want any 'top' positioning.

I am using the Wordpress theme - Joints WP. I added the code below to the bower_compenents/foudnation/js/foundation/dropdown.js file. It isn't making a difference. I am aware that I should not be editing this file but I do not know an other way around this.

<a href="#" data-options="align:top" data-dropdown="droptop">Video</a>
   <div id="droptop" data-dropdown-content class="f-dropdown content">
      <h3>Test test</h3>
</div> 
            

         

 var      sel_before = '.f-dropdown.open:before',
          sel_after  = '.f-dropdown.open:after',
          css_before = 'left: ' + pip_offset_base + 'px;',
          css_after  = 'left: ' + + '20%;';

I also tried add this Javascript. It isnt working either. I added the Javascript to my script.js file

 document.getElementById('droptop').onclick = function() {
   document.getElementById('droptop').style.left = "20%";
};      

         

Dropdown Contentcssinlinejsjavascript

I was wondering if anyone could help me. I want to change the inline CSS for Dropdown content. The content is being displayed above the link.

When active I want the content to be have this CSS: 'left:20%;'
I also do not want any 'top' positioning.

I am using the Wordpress theme - Joints WP. I added the code below to the bower_compenents/foudnation/js/foundation/dropdown.js file. It isn't making a difference. I am aware that I should not be editing this file but I do not know an other way around this.

<a href="#" data-options="align:top" data-dropdown="droptop">Video</a>
   <div id="droptop" data-dropdown-content class="f-dropdown content">
      <h3>Test test</h3>
</div> 
            

         

 var      sel_before = '.f-dropdown.open:before',
          sel_after  = '.f-dropdown.open:after',
          css_before = 'left: ' + pip_offset_base + 'px;',
          css_after  = 'left: ' + + '20%;';

I also tried add this Javascript. It isnt working either. I added the Javascript to my script.js file

 document.getElementById('droptop').onclick = function() {
   document.getElementById('droptop').style.left = "20%";
};