How to change menu color

Hey there enquirerit,

How are you doing today?

What exactly are you trying to change? Menu link color, background color?

Either way this should be possible with some custom CSS if there is no option in your theme for that. Please post link to your site and let me know what exactly are you looking to change color to and I’ll be happy to help ??

Cheers,
Bojan

You can change the default pink navbar in Sela with this custom CSS:

#site-navigation {
  background-color: #bb00bb;
}

Change the purple example colour to anything you like!

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Thank you for the code. Yes, I just use a child theme; I have difficulties to find every colour customization, for example the color of the menu button of main navigation bar in mobile version or buttons like ‘subscribe’ features or ‘leave a comment’. Where are they?!

Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

If you still need help after having a read of those, could you provide a link to your site so I can have a look directly?

Thank you, my site is this: https://www.studioangiuli.it/
I have problems understanding css language ?? grrr

Found: problem is that some css controls are loaded by browser from main Sela css file and NOT from Sela child theme css file, for example the ‘Subscribe’ button for site updates on the sidebar. Thank you for the ‘Inspection element’ extension of Chrome.

Glad that was helpful – CSS can take a while to get the hang of, but once you do it makes targeting elements a lot easier.

Keep in mind that the only CSS you need to add to your child theme’s stylesheet are the bits that you need to override the parent theme’s styles. You don’t need to include any other CSS from the parent — only the overrides. Your child theme will pull in the parent’s styles first, then add the overrides from the child.

Yes, I know that but I thought that copying all main theme css values into child theme css file will overwriting all values. Thank you. Do you like the site? Is backend-Wordpress colours friend.

Great theme! I did the suggested edit, but when viewing in a small screen when it switches to mobile format, the background just around the word menu is still the old color. Do you know which CSS I need to change to change this background color as well?

Yes, I made changes to obtain the same color of the other menu choises. You have to change this value (background color) in style.css:

button,
input[type=”button”],
input[type=”reset”],
input[type=”submit”],
#infinite-handle span {
background-color: #D9645A;
border-style: none;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 12px;
font-size: 1.2rem;
line-height: 2;
padding: 6px 15px;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1);
-webkit-appearance: none;
}

Note that I added manually the right shadows and borders around each site element (branding, menu, site content, footer).

Can I enter this into the Appearance > Edit CSS field as well, rather than editing the CSS directly?

I edited the CSS style file of a child theme, but I think you can manage directly into Appearance > Edit CSS, so that it can save your changes… Try and view. I suggest you to create a child theme so you can make every changes you want and preserve your css values from overridding operation when you update main theme files.

Can I enter this into the Appearance > Edit CSS field as well, rather than editing the CSS directly?

You shouldn’t edit the theme’s CSS directly, otherwise you’ll lose all your changes every time you update the theme to the latest version. You can either create a child theme as enquirerit did, or use the Jetpack Custom CSS Editor at Appearance > Edit CSS – either way, your CSS tweaks won’t be affected when the theme is updated and your CSS will be safe.