CSS help to change dropdown menu menu/submenu text!

  • Author
    Posts
  • #1202832

    beautylustnz
    Member

    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.

    #1203002

    justpi
    Member

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

    #1203006

    justpi
    Member

    PS Turning #nav to transparent removes the pink bg from the main menu only. Do you also want to change the dropdowns?

    #1203085

    beautylustnz
    Member

    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

    #1203086

    beautylustnz
    Member

    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 :)

    #1203101

    justpi
    Member

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

    #1203102

    beautylustnz
    Member

    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 :)

    #1203105

    justpi
    Member

    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).

    #1203192

    0emma
    Member

    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!!

    #1203193

    0emma
    Member

    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?

    #1203194

    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 https://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.

    #1203195

    0emma
    Member

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

The topic ‘CSS help to change dropdown menu menu/submenu text!’ is closed to new replies.