I have the Astra theme installed along with the Elementor plugin.
Can anyone guide me on how to change the CSS value of the dropdown ul item display from "block" to "grid"? I have tried adding custom CSS code but it's not taking effect.
.elementor-nav-menu--dropdown {
display: grid;
grid-template-columns: 1fr 1fr;
}
I also attempted to add jQuery at the bottom of footer.php, just above the body tag, but it didn't work. The code doesn't seem to be implemented on the website.
<script>
if($('.elementor-nav-menu--dropdown').visible{
($('.elementor-nav-menu--dropdown').css('display','grid')
};
</script>
In addition, when trying to add custom code through the Elementor plugin, an error message saying "$ is not a function" appears.
<script>
if($('.elementor-nav-menu--dropdown').visible{
($('.elementor-nav-menu--dropdown').css('display','grid')
};
</script>
Currently, the dropdown menu displays as "block" when visible, but I want to change it to "grid".