Support » Plugins and Hacks » Custom CSS for selected options

Custom CSS for selected options

  • 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?


Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Beee


    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 ?

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

    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.

    Plugin Author Beee


    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; }

    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.

    Plugin Author Beee


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

    I couldn’t ask any more of you 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Custom CSS for selected options’ is closed to new replies.