-
Posts
-
Hi,
I want to add a second menu underneath the main menu. To do so, I added this piece of code to my functions.php file.
php
add_action(‘ava_after_main_container’, ‘custom_submenu’);
function custom_submenu() {
$classes = get_body_class();
if ((in_array(‘woocommerce-page’, $classes)) || (in_array(‘archive’, $classes))) {
echo do_shortcode(“[av_submenu which_menu='' menu='3251' position='right' sticky='aviaTBsticky' color='footer_color' mobile='disabled' mobile_switch='av-switch-768' alb_description='' id='' custom_class='only-desktop' template_class='' av_uid='av-m8fv68yn' sc_version='1.0']
[av_submenu_item title='Menu Item 1' button_style='' link='' link_dynamic='' linktarget='' title_attr='' av_uid='av-d3kl3k2' sc_version='1.0']
[av_submenu_item title='Menu Item 2' button_style='' link='' link_dynamic='' linktarget='' title_attr='' av_uid='av-683en9e' sc_version='1.0']
[/av_submenu]“);
}
}
This is working perfectly on desktops. However, on mobile devices, it breaks the layout on WooCommerce pages—my two columns of products are squeezed to one side, taking up only half of the screen while leaving the other half blank.Since I don’t want the menu to appear on mobile devices, I tried hiding it with this CSS:
css
@media only screen and (max-width: 768px) {
.desktop-only {
display: none !important;
}
}
But it doesn’t work. Can you help me figure out a way to hide the full-width submenu on mobile devices so it doesn’t break the layout?Hey ditteditte,
Thank you for the inquiry.
Based on the class parameter in the shortcode, the selector should be “.only-desktop”. Please replace the css with the following code:
@media only screen and (max-width: 768px) { .only-desktop { display: none !important; } }Best regards,
IsmaelSorry – that was my mistake. I wrote the wrong CSS when I was writing to you.
It doesn’t work with the correct CSS either. In the meantime, I found the right solution, which was this PHP:
php
Kopiér
Rediger
add_action(‘ava_after_main_container’, ‘custom_submenu’);
function custom_submenu() {
if (wp_is_mobile()) {
return; // Stop the function if it’s a mobile device
}
$classes = get_body_class();
if ((in_array(‘woocommerce-page’, $classes)) || (in_array(‘archive’, $classes))) {
echo do_shortcode(“[av_submenu which_menu='' menu='3251' position='center' sticky='aviaTBsticky' color='footer_color' mobile='disabled' mobile_switch='av-switch-768' alb_description='' id='' custom_class='' template_class='' av_uid='av-m8fv68yn' sc_version='1.0']
[av_submenu_item title='Menu Item 1' button_style='' link='' link_dynamic='' linktarget='' title_attr='' av_uid='av-d3kl3k2' sc_version='1.0']
[av_submenu_item title='Menu Item 2' button_style='' link='' link_dynamic='' linktarget='' title_attr='' av_uid='av-683en9e' sc_version='1.0']
[/av_submenu]“);
}
}
- You must be logged in to reply to this topic.