Changing the menu behaviour for Sparkling WordPress theme

I think I read in some thread here already partially something regarding my question, but can’t find it anymore…
Anyway, I really love the theme but I don’t like that once a menu item in the main navigation has sub-items you can’t click on it anymore, even when it would (or could) be actually a link. I do understand, that you need that click for mobile devices to open the submenu there (no mouse over), but it’s totally weird on the desktop and a waste of space too.
On another website I am currently working on, I am using WPtouch for the mobile menu and the theme there inspired me for a (imo) more elegant solution.
Before I try to explain it, just have a look: http://studioA.eu (you have to open it on a smartphone or make sure you open it on a desktop browser with a mobile user agent active).
I would simply use the little triangle, separate it to the right side and make it maybe a little bit bigger and use it as a button to open/close the dropdown functionality, maybe also introduce some very fine lines (not sure whether the lines are necessary).
The CSS part wouldn’t be a big challenge, but I have no clue how to:

  1. change the code so that the main menu item will keep being an active link (I have not even an idea where to look for it)
  2. the PHP part to generate for example a <span> tag for the extra button
  3. I wouldn’t mind some little help JS/jQuery code either, but I suppose I would get that part also done by myself.
    From 1 to 3 number 1 is where I would definitely need some help, 2 and 3 I could probably also figure out by myself.
    In exchange for the help I would of course provide the whole code, once it works.

Maybe I try to ask my question a bit differently.

I would like to change the main menu in so far that if I have let’s say a page linked from the main menu (main menu page-1) and two sub-pages respectively in a submenu (page-1.1 and page-1.2) under that main nav item, that the main nav item is still clickable as a link to that page (and not disabled, like it is currently).

Furthermore, in the mobile layout I would also like to have the name as a link and only use the little triangle (currently it seems to have the CSS class “caret”) as a toggle to open/close the submenu.

Would this be very complicated to achieve?

I am positive that I could manage the necessary CSS styling and also probably the Javascript part on my own. Unfortunately I am struggling with the Wordpress/PHP part, I don’t even have a clue where to start.

This theme uses default Bootstrap menu and as long as Bootstrap doesn’t switch to a different menu structure we will stick with what there is available by default. Bootstrap navwalker itself is adopted for WordPress using this library.

The best you can do is to make top menu item to work on desktop but it still won’t work on mobile.

You can do it like this:

  1. Open navwalker.php file that you can find in theme folder >> inc.

  2. On that file replace these lines of code:

if ( $args->has_children && $depth === 0 ) {
    $atts['href']                   = '#';
    $atts['data-toggle']        = 'dropdown';
    $atts['class']                        = 'dropdown-toggle';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

with these lines:

if ( $args->has_children && $depth === 0 ) {
  $atts['href']          = ! empty( $item->url ) ? $item->url : '';
  $atts['data-toggle']   = 'dropdown';
  $atts['class']         = 'dropdown-toggle';
  $atts['aria-haspopup']    = 'true';
  //$atts['data-toggle']   = 'dropdown'; <- gets added in jQuery file on < 768 window
} else {
  $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
  1. Now add this to Appearance >> Theme Options >> Other >> Custom CSS
@media (min-width: 767px) {
  .dropdown:hover .dropdown-menu {
      display: block;
  }
}
  1. And add this jQuery code to functions.min.js file that you can find in theme folder >> inc >> js.
jQuery(function($) {
  // Bootstrap menu magic
  $(window).resize(function() {
    if ($(window).width() < 768) {
      $(".dropdown-toggle").attr('data-toggle', 'dropdown');
    } else {
      $(".dropdown-toggle").removeAttr('data-toggle dropdown');
    }
  });
});

That’s the best solution currently available for Bootstrap based menus.

I’ve made ​​the changes as described , but it still does not work. The correct URL of the parent item is there, but the page does not load when I click on the button. What do I need to make it work?

I know this is an old thread, but I was having the same issue where it items that had sub menus were not clickable on mobile I ended up coming up with this bit of CSS you add under the WP-Admin–>Appearance–>Customize–>Additional CSS:

@media (max-width: 768px) {
/* Target clickable items with children and apply full styles /
.navbar-nav li.unclickable.dropdown.menu-item-has-children a {
padding-right: 30px; /
Adjust as needed for caret /
position: relative; /
Establish positioning context */
}

.navbar-nav li.unclickable.dropdown.menu-item-has-children a:after {
content: “”;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

.navbar-nav li.unclickable.dropdown.menu-item-has-children .caret.sparkling-dropdown {
position: absolute;
top: 0;
left: 0;
padding: 15px 30px; /* Adjust as needed */
width: 100%;
border: 0;
}

/* Ensure submenu links are clickable /
.navbar-nav li.unclickable.dropdown.menu-item-has-children ul.dropdown-menu li a {
display: block; /
Ensure full link area is clickable /
padding: 10px 20px; /
Adjust as needed */
}

/* Target submenu items without children and remove caret /
.navbar-nav li.unclickable.dropdown ul.dropdown-menu li:not(.menu-item-has-children) a {
padding-right: 5px; /
Adjust as needed */
}

.navbar-nav li.unclickable.dropdown ul.dropdown-menu li:not(.menu-item-has-children) a:after {
content: none; /* Remove caret */
}

/* Target items without children (top-level) and apply minimal styles (no caret) /
.navbar-nav li.unclickable.dropdown:not(.menu-item-has-children) a {
padding-right: 5px; /
Adjust as needed */
}
}

No guarantees that it’ll work for you but thought I’d share.

Hi there

@GordonH thank you so much for sharing this with us :slight_smile:

Regards