[Trishah]

I need to change the look of the text of current item in TinyNav. This is not possible with css because the only identifier the current item has is: selected="selected"

I have looked at the TinyNav website and other forums and found the following code that is suppose to add “class=’active'” to this item:

$("#tinynav1").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)
});

I’ve tried adding the above code via enqueue script in functions.php and changing the “$” to “jQuery” but it’s not working. I suspect the code is needed inside the TinyNav javascript to work and I don’t want to mess with core files.

Do you have any suggestion on how to style the current item?

[Sakin]

@Trishah: Sorry I don’t think it will work. No Idea. As per my knowledge the active: 'selected' is for tinynav to now our selected item. We already set it as active:"current-menu-item"

[Trishah]

Thank you for your reply, Sakin.

I’m a little confused… Are you saying that there is already a way to css the current option in TinyNav using current-menu-item? I’ve tried several ways but nothing works. Or did I misunderstand you?

[Sakin]

@Trishah: Sorry if that is confusing but the active:"current-menu-item" in tinynav setting is used to show the current menu as selected in menu. If you check our demo site http://catchthemes.com/demo/catchbox in mobile devices, you will see current menu item as “Home”, then lets go to “HTML Elements” page and then you will see in menu bar changed from Home to HTML Elements. This is how tinynav use active elements.

[Trishah]

@Sakin: Yes I see that. So when the <option> has the selected="selected" it shows that option into the window of TinyNav as the current page you are on. Got it.

I was just hoping there was a way to add css identifiers to the options so I could style them differently.

I’m able to do some css tweaks but not all that I would like. For instance… In my current project (the development site is at http://jerseycampfireboys.com/site/), when you are on the homepage, the word “Home” shows in the window, and on the dropdown, the word “Home” is displayed in white to show in the dropdown that it is the current page. The background I want to use for the dropdown is a light wood color, the white word gets lost on it.

I’ll probably end up using a dark wood for the dropdown background so the white shows up, but design wise it’s better with the light wood.

I was just hoping there was a way to style it better… I just want what I want when I want it 😀 lol.

[Sakin]

@Trishah: Sorry I cannot do that.

[Trishah]

Okay, just thought I’d ask. I have a support ticket in with TinyNav to see if they can help. I’ll let you know what I find out.

[Sakin]

Thanks

[Author]

Posts