WordPress.org

Ready to get started?Download WordPress

Forums

TinyNav
Custom CSS for selected options (7 posts)

  1. trishahdee
    Member
    Posted 7 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/

  2. Beee
    Member
    Plugin Author

    Posted 4 months 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. trishahdee
    Member
    Posted 4 months 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
    Member
    Plugin Author

    Posted 4 months 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. trishahdee
    Member
    Posted 4 months 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
    Member
    Plugin Author

    Posted 4 months ago #

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

  7. trishahdee
    Member
    Posted 4 months ago #

    I couldn't ask any more of you :)

Reply

You must log in to post.

About this Plugin

About this Topic