[Support request] CSS bug in Sider

[Sunny]

Hello,

I am using the Sider template. On mobile menu the text is aligned to Center by default and on looking into the code it seems to be marked as important in the parent theme.

Any idea on how can I align the menu items towards left?

[David]

Hi there,

if you go to Customiser > Additional CSS and look for and remove the following CSS:

.main-navigation.toggled .main-nav li {
	text-align: center !important;
}

[Sunny]

Thank you! Works fine now.

I have another question regarding the menu on Desktop, currently when you have dropdown menu items and when you click one of the dropdown items, the dropdown menu closes. How can I keep the dropdown menu open?

[David]

This topic may be of help:

https://generatepress.com/forums/topic/expand-submenu-on-mobile-while-on-subpage/

[Sunny]

Hey David, thanks for the tip it helped.

One issue though, suppose I open the sub menu by clicking the parent menu item. Now when click the sub menu item the page reloads to open that specific page. Since the page reloads the menu closes, how can we keep it open.

Like for example how they have done it here – https://www.audi.com/ci/en/intro/basics/layout-structure.html

[David]

Ah ok, so this may be the solution that Tom provides a link to hear:

https://generatepress.com/forums/topic/active-submenus/#post-630859

[Sunny]

Almost there!

Just one last thing, when the sub menu is open and I click on a sub menu item the menu stays open. That’s perfect but at the same time when I click on other menu the existing opened sub menu doesn’t close. How can I close that?

[Tom]

Instead of this: https://generatepress.com/forums/topic/css-bug-in-sider/#post-656717

You could try this:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'jquery' );
} );

add_action( 'wp_head', function() {
	?>
	<script>
		jQuery( document ).ready( function($) {
			$( '.current-menu-ancestor' ).addClass( 'sfHover' ).find( '.sub-menu' ).addClass( 'toggled-on' );
		} );
	</script>
	<?php
}, 999 );

Let me know 🙂

[Sunny]

Perfect Tom. This worked like a charm.

Though one more issue, on my site I am mostly using anchor links in the sub menus. So when I click on a sub menu item then all the other links of that particular menu changes to same color. Instead I would it to change it only for that link which I clicked.

[Tom]

Unfortunately there’s not an easy way to deal with that.

WordPress adds the current-menu-item class to menu items when we’re on that particular page. You would have to tell WordPress not to highlight those menu items by default.

Then you’d need a JS solution to highlight links when we get to their anchor. I believe this plugin does that: https://wordpress.org/plugins/page-scroll-to-id/

[Author]

Posts