I would like to replace the gray line that appears when you hover over the menu with a white arrow, centered over the submenu.
Hey Merilla!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.menu li > a:after { content: ' ▾'; }
.menu li > a:only-child:after { content: ''; }
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
If that does not help, please post a screenshot showing the changes you would like to make. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.
Cheers!
Yigit
Hi Yigit!
I have posted an image in dropbox. See link below.
Thanks for helping me.
Regards
Marianne
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
span.avia-sub-menu-fx:after {
content: '';
height: 10px;
width: 10px;
display: block;
margin: auto;
background: red;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: -5px;
position: relative;
}
then add following code to Functions.php file in Appearance > Editor
function av_submenu_arrow(){
?>
<script>
jQuery(window).load(function(){
jQuery('<span class="avia-sub-menu-fx"></span>').prependTo('.av-main-nav > li > ul')
});
</script>
<?php
}
add_action('wp_footer', 'av_submenu_arrow');
Best regards,
Yigit