-
Posts
-
I’m having an issue with making the submenu sticky. So far I’ve managed to make it sticky by applying the following quick css code:
@media only screen and (max-width: 767px) {
.responsive #top .header-scrolled-full .av-submenu-container {
top: 0 !important;
position: fixed !important;
height: auto;
min-height: 0;
margin-bottom: -1px;
}#overview {
margin-top: 10px;
}
}However in addition, I had to change a line of code in the parent theme at config-templatebuilder –> avia-shortcodes –> menu –> menu.css
In particular, I had to remove the !important in line 60:
@media only screen and (max-width: 767px)
{
.responsive #top .sticky_placeholder{max-height:0px; }
.responsive #top .av-submenu-container{top: auto!important; position: relative!important; height:auto; min-height:0; margin-bottom: -1px;}First question I have is whether there’s a way to apply the change in the child theme instead of the parent theme as this will make updates simpler.
The second question I have is about closing the submenu automatically upon clicking an item on the submenu.
We’re referring to this link.For a clearer example of what we mean:
https://staging.equinetacademy.com/wp-content/uploads/Capture.jpgAppreciate any advice on this matter. Thanks!
Hey jells2,
1) You can add this code to your child theme to remove the default menu.css:
function avia_remove_menu_css() { wp_dequeue_style( 'avia-module-menu' ); } add_action( 'wp_print_styles', 'avia_remove_menu_css', 100 );Then add the (modified) css code of menu.css to your child theme styling code.
2) I added this code to the child theme functions.php to automatically close the menu on click:
add_action('wp_footer', 'avia_auto_close_mobile_menu', 10); function avia_auto_close_mobile_menu() { ?> <script> (function($) { $('#av-custom-submenu-1 a').on( "click", function() { $('.mobile_menu_toggle').trigger('click'); }); })(jQuery); </script> <?php }Best regards,
Peter
- The topic ‘Applying shortcode css changes in child theme and autoclose submenu on mobile’ is closed to new replies.