CODEWITHSUNDEEP
htmlcsswordpresswordpress-theming
Haikukitty
Haikukitty

Reputation: 162

Choosing 'selected' menu item in WP collapsible mobile menu

Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.

I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.

Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.

So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"

I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.

I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.

Thanks!!

Upvotes: 1

Views: 1155

Answers (2)

cjd82187
cjd82187

Reputation: 3593

I had a look at the plugin.js file on the site www.opted.org.

On line 22, there is 'header' : false // Boolean: Show header instead of the active item

and on line 41 there is jQuery('<option/>').text('Navigation')

Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'

Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:

$("#nav").tinyNav({
  active: 'selected', // String: Set the "active" class
  header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
  label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});

In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.

Upvotes: 5

vlasits
vlasits

Reputation: 2235

It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.

Here's the code you would use to set it to 'About Asco' using jQuery:

jQuery('.tinynav').val('/about-asco/')

alternatively (a little clearer, but more verbose):

jQuery('.tinynav option:first').prop('selected', true);

Upvotes: 0

Related Questions