[Kristin]

Hi,
Is there a way to only have the top-level pages of my “secondary navigation” display when viewing on mobile devices?

My Site: http://new.stmichael.net/

You’ll see I’m using the secondary navigation location more as a primary navigation.
I have 7 top-level items (About Us, Admissions, Academics, Beyond Academics, etc) and about 24 second level pages. When viewing on a smaller screen I get the label “Menu” and when I click on that I see all 31 pages listed. It’s very cumbersome. Instead, I’d only like to have the 7 top level pages listed. Any way to do that?

Thanks so much!

[Sakin]

@Kristin: Sorry there is no option to do that. You need to build child theme and custmize menu js.

[Kristin]

Ok, thanks. That’s a bit beyond me. Is this the code I’d be touching? Any help would be appreciated!

// Responsive Menu (TinyNav)
jQuery(“#hgroup-wrap .menu”).tinyNav({
‘active’ : ‘current-menu-item’, // String: Set the “active” class
header: ” // String: Specify text for “header” and show header instead of the active item
});

// Responsive Menu (Selectbox)
jQuery(function () {
jQuery(“.tinynav”).selectbox();
});

// Aria Haspopup for Touch Devices
jQuery(document).ready(function () {
jQuery(“.menu-item”).has(“ul”).children(“a”).attr(“aria-haspopup”, “true”);
});

[Kristin]

Or would it be this code from the allmenu.js file?

I understand that I would make a copy in my child theme and not touch the original files. Just don’t know js well enough to do that.

// Responsive Menu (Selectbox)
jQuery(function () {
jQuery(“.tinynav”).selectbox();
});

// Aria Haspopup for Touch Devices
jQuery(document).ready(function () {
jQuery(“.menu-item”).has(“ul”).children(“a”).attr(“aria-haspopup”, “true”);
});

[Sakin]

@Kristin: Yes it’s source file is catchkathmandu-allmenu.js but compress file that we use in theme in catchkathmandu-allmenu.min.js

[Kristin]

Hi there- I’m still trying to figure this out.
Anyone know js well enough to help?
I’m trying to only display the top-level pages of my “secondary navigation” when viewing on mobile devices?

[Sakin]

@Kristin: Yes you are right

[Kristin]

I would like to display only top level pages on tablets and phones. Anyone know the code edits I’d need to make?

This it’s this code I’d be overriding??
jQuery(“.menu-item”).has(“ul”).children(“a”).attr(“aria-haspopup”, “true”);

[Sakin]

@Kristin: Sorry this is beyond theme customization. It’s from tinynav and select box. So, you might want to take help from there or hire Javascript developer to work on it.

[Author]

Posts