The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Custom CSS for selected options (7 posts)

  1. Trishah
    Posted 2 years ago #

    I have styled my TinyNav with css and all looks good but for one thing I can not change, I'm hoping you can help...

    If you are on the homepage, then (1) "Home" appears in the window and (2) "Home" also appears in the dropdown list and is displayed in white text. This is fine for the default look as the hover background of the dropdown is dark. But I want to use a light background on the dropdown. I can do this with the current css but then the white text of the select=selected option item is difficult to read.

    #1 Is there a way to add a css class to the selected item so it can be styled?

    #2 Is there a way to change the color of the hover background?


  2. Beee
    Plugin Author

    Posted 2 years ago #

    Hi Trishadee,

    sorry it took some time to reply, but luckily there's no need for daily support, so I sometimes forget when caught up in another project.

    Can you maybe tell me the URL of your site so I can take a look ?

  3. Trishah
    Posted 2 years ago #

    Yes, you have a very excellent plugin that always works great on the sites I design. It is my preferred responsive menu solution :D

    The site is: http://jerseycampfireboys.com/

    When you shrink the browser and look at the dropdown, you will see that I have a light wood background. The current menu item is in white and does not show up very well. I would like to change the white to a darker color but just can't figure out how.

    Any assistance will be greatly appreciated.

  4. Beee
    Plugin Author

    Posted 2 years ago #

    I see you set the plugin to go active at 768.
    When a screen is between 768 and 960 pixels, the menu also 'disappears'.
    See: http://imgur.com/4fY5Kjd

    Reg. the active page, that is dependent on which browser you use.
    This is with Firefox: http://imgur.com/e9xWv5c
    This is with Chrome: http://imgur.com/Te2cXv1

    It seems the :focus is making it better to read (in Chrome).
    But I don't know right now where the white is coming from.

    I've never coloured my own tinynav's so didn't really think about it until now :)

    If I would have to suggest something it would be adding something to your css like this:

    .tinynav .option.active { color: #xxxxxx; }
  5. Trishah
    Posted 2 years ago #

    Thank you for the input. I have changed the responsive styling to work as originally intended.

    I have tried the css you suggested but that does not work. I think it needs it's own css class in order to style it.

  6. Beee
    Plugin Author

    Posted 2 years ago #

    then I would have to look into the .js to see if I can edit something there.... no promises, but will try

  7. Trishah
    Posted 2 years ago #

    I couldn't ask any more of you :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • TinyNav
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic