Custom CSS for selected options

  • trishahdee

    (@trishahdee)


    12 years, 4 months 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?

    http://wordpress.org/plugins/tinynav/

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

    (@beee)

    12 years, 1 month 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 ?

    Thread Starter trishahdee

    (@trishahdee)

    12 years, 1 month ago

    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

    (@beee)

    12 years, 1 month 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; }

    Thread Starter trishahdee

    (@trishahdee)

    12 years, 1 month 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.

    Plugin Author Beee

    (@beee)

    12 years, 1 month ago

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

    Thread Starter trishahdee

    (@trishahdee)

    12 years, 1 month ago

    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.