WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change menu color (12 posts)

  1. hufflefluffer
    Member
    Posted 5 months ago #

    [Moved from Your WordPress which is NOT a support forum.]

    I'd like to change my menu color. I'm using the theme Kraken.
    Hufflefluffer.dk

  2. Kristina
    Member
    Posted 5 months ago #

    Hello,
    if you wont the cange background color of menu on your site go to Appearance/Edir, select your theme, scroll down and there find file Stylesheet. Open it and there paste this code:

    #site-navigation .dropdown-menu ul a {
    background-color: #ff00FF;
    }
    You can put your color (for example: #12K5F5)

    By,
    Kris

  3. CrouchingBruin
    Member
    Posted 5 months ago #

    You should not edit the theme files directly, because if the theme ever gets updated (like for feature updates or security patches), then you will lose your changes. Instead, you should either create a child theme and add your CSS to the child theme's style.css file, or use a custom CSS plugin if your theme doesn't have a Custom CSS option.

  4. hufflefluffer
    Member
    Posted 5 months ago #

    Thank you for your answers. I'm quite new at WordPress, but I've managed to install a child theme. What is my CSS specifically? Does it realte to Kris' answer?

  5. Kristina
    Member
    Posted 5 months ago #

    Yes if you have a child theme.
    By,
    Kris

  6. CrouchingBruin
    Member
    Posted 5 months ago #

    Yes, you can add her CSS to the end of your child theme's style.css file.

  7. hufflefluffer
    Member
    Posted 5 months ago #

    I think I haven't been clear enough. I did not want to change the colors of the dropdown menu, but the menu itself. (I'm not sure of the exact name of it.. the one that's always at the top). Right now, it's sort of black/blueish... However, the CSS did work - for the dropdown menu.

    I hope this clear things up. (Maybe I'm just not doing it right?)
    Anyway, thank you for your answers so far!

  8. CrouchingBruin
    Member
    Posted 5 months ago #

    You want to target the #site-navigation-wrap. Add this to the end of your child theme's style.css file:

    #site-navigation-wrap {
       background-color: #ddf;
    }

    Of course, use whatever color value you want.

  9. hufflefluffer
    Member
    Posted 5 months ago #

    Ah, I see! Thank you.
    However, as I change that color, the others (when I hover over, or the selected, etc.) remain the same. Will I need to change all of them individually? And is there a tutorial to do this, or is it just "watch and learn"?
    Again, thank you.

  10. CrouchingBruin
    Member
    Posted 5 months ago #

    You should learn to use a web debugging tool like Firebug (a free Firefox extension) or Chrome Developer Tools, which comes built-in with Chrome. I used Chrome DevTools to look at your site and figure out what selector to use. All you need to do is right-click on an element and select Inspect element from the pop-up menu and you'll see all of the CSS rules which affect that element.

    Other selectors that you'll need to style:
    #site-navigation .dropdown-menu > .current-menu-item > a
    As you can tell from the wording, this targets the color of the current menu item, which is the menu item that corresponds to the page that you are viewing. If you are on the Home page, then this would affect the color of the Home menu item.

    #site-navigation .dropdown-menu ul a
    As Kristen indicated earlier, this targets the drop down menu items.

    If you're looking for a good CSS tutorial, I like this one.

  11. hufflefluffer
    Member
    Posted 5 months ago #

    I will definitely look into that. Thank you!

  12. hufflefluffer
    Member
    Posted 5 months ago #

    Resolved

Reply

You must log in to post.

About this Topic