Need help? Check out our Support site, then


CSS help to change dropdown menu menu/submenu text!

  1. Hello

    I really need help with CSS to change the color of my drop down menu text.

    I have been trying to use this but it doesn't work:

    .sf-menu ul li a {
    color:##FA58D0;
    }

    I have been able to make the menu white with this:

    #nav { background: transparent; }

    So all I am looking to do is make the actual text of the menu and submenus colored as when I make the menu tab white the text goes white too.

    Any help would be appreciated.

    The blog I need help with is beautylust.co.nz.

  2. Use this:

    #nav li.right, #nav li a, #nav li.right a {
    color: #FA58D0;
    }

    But the active menu item turns to a semi-transparent white, and so does each menu item when you hover over it, so if you remove the pink bg you also need to change these to a color other than white. The selectors are:
    #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a

    And if you remove the pink bg, the menu won't look ok without a border, so instead of just transparent I would do this:

    #nav {
    background: transparent;
    border: 1px solid #D5D5D5;
    }
  3. PS Turning #nav to transparent removes the pink bg from the main menu only. Do you also want to change the dropdowns?

  4. Thanks so much for this, I will give it a go now.
    YES I also need to change down the dropdown menus to transparent - do you know how I would do that?

    Thanks so much
    Steph

  5. I just tried this:
    #nav {
    background: transparent;
    border: 1px solid #D5D5D5;
    }
    #nav li.right, #nav li a, #nav li.right a {
    color: #FA58D0;
    }
    #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a

    It took away the pink menu bar and successfully made the text pink, but it still turns to white white when you hover the mouse over it. Do you know how I would go about fixing this?

    Do you also know how I would change the submenu/dropdown menu text to grey (and get rid of the pink bg like you mentioned before)

    Thanks so much, I really do appreciate all the help!!

    Steph :)

  6. You're welcome.

    a) The hover color is still white because you didn't set any color: as I said above, #nav li a:hover etc etc are just the selectors. Selectors need to be followed by opening bracket, properties and values, closing bracket.
    Your "Contact" and About" links switch between grey and pink, so I suggest this same grey for the menu hover (as well as the text of the dropdowns).
    b) The submenus drop in front of the main content, so they need to have a background color. Since you didn't mention this, I assume you mean white, with no horizontal divider lines.

    So, here's everything put together - see if you like it this way:

    #nav {
    background: transparent;
    }
    #nav ul {
        border-bottom: 1px solid #D5D5D5;
        border-top: 1px solid #D5D5D5;
    }
    #nav li.right, #nav li a, #nav li.right a {
    color: #FA58D0;
    }
    #nav li a:hover, #nav li a:active, #nav .current_page_item a, #nav .current-cat a, #nav .current-menu-item a {
    color: #6D6D6D;
    }
    #nav li ul {
        border: 1px solid #D5D5D5;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
        background-color: #FFFFFF;
        border-color: #FFFFFF;
        color: #6D6D6D;
    }
  7. Thanks so much! That looks perfect, you have been a life saver.
    Do you know how I would go about changing the colour of the social media icons at the top right of the blog? Is that done with CSS too?

    I also tried adding a Pinterest Icon but it just came up with the word 'Pinterest' and not an icon?

    Any help would be awesome :)

  8. You're welcome!

    I'm seeing you changed the submenu items from grey to pink: agree, more reasonable.
    (By the way, kudos for turning the theme into something more elegant than its original newspaper look.)

    Yes, the social media icons can be changed with CSS, but this is trickier because they are images: you have to download the original set of icons to your computer, change its color in an image editing application, upload it to your blog, copy the file URL, and use it in the CSS editor. Since MN is a premium theme, I don't seem to have access to its images. I think you have to ask in the forum for this theme, or wait for a staff reply here.

    Your Pinterest text widget contains only a link. What exactly did you try to add? If it was code, paste it here between backticks (see the note on "allowed markup).

  9. Hi! I'm having a similar issue except with the background color of my dropdown menu of categories. I'm using Enterprise theme.

    The blog I need help with is gingergram.com

    I used some of the code to change the bar colors (yay!) but botched some things up too...

    1. How do I make it so the link to the page "My Pinterest Page" is aligned with the other page titles "Home" and "Graphic design." Note that the "My Pinterest Page" is directly linked to my pinterest.

    2. I want the vertical lines that separate each page title to connect to the bottom border of the page nav bar. Note that I don't want a gap between the text of the page titles and the border.

    3. When you hover over the categories, I want the hover color to be the same greenish color (5EB094) like this person's blog who is also using enterprise theme: http://awesomedc.com/

    4. When you hover over one of the items in the category drop down menu like SweetTooth>Sinfully Tasty I want a block background color a slightly darker version of the green. Just like the format of http://awesomedc.com/

    5. Also..the category "Baked Goodies" is has a background block of gray..what the heck?

    Help please!!

  10. Also there are two RSS links (one for posts and one for comments) on the right side of my pages nav bar that have white background block when you hover...is there a way to just get rid of those rss links?

  11. 0emma, hello! That's a lot of quesitons! Since your theme is not the same as the one referenced earlier in this thread, would you mind creating a separate help request at http://en.forums.wordpress.com/forum/css-customization/#postform ?

    One question per request (or just a few alike ones together, like menus questions) is helpful so we can keep questions about different themes and topics well-organized.

  12. Okay thanks designsimply! If you can help, here is the new forum.

Topic Closed

This topic has been closed to new replies.

About this Topic