Menu Drop Shadow Won't Go Away

Don’t know what you’ve tried! Link to site would be useful please.

Micorazoncanta.com

For the tagline open the stylesheet at https://micorazoncanta.com/wp-content/themes/customizr/inc/css/yellow.css?ver=3.0.9

go to line 978 and remove the “text-shadow” property.

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    margin: 10px 0;
    text-shadow: 0 1px 0 white;
}

For the menu go to line 3931 and remove the same thing

.navbar .nav > li > a {
    color: #777777;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 1px 0 white;
}

@jesin I’m using a Child Theme. Do I need to change this in the FTP?

OKAY I GOT IT! THANKS @jesin!

You’re welcome.

Just a small change for removing the shadow of the tagline you’ll have to edit one more location.

Line 72 of https://micorazoncanta.com/wp-content/themes/customizr-child/style.css?ver=3.0.9

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: inherit;
    font-weight: bold;
    line-height: 20px;
    margin: 10px 0;
    text-shadow: 0 0 0 white;
}

How were you able to fix this with the child theme?

I made a copy of the yellow.css file and placed it in customizr-child/inc/css/yellow.css and removed the text-shadow, but it didn’t seem to take.

https://www.digitaltrafficninjas.com

Make your CSS changes in your Child Theme style.css file, add new styles that override old ones.

If you have copied all of the styles over from the parent theme’s style.css file into your Child Theme style.css file, there’s really no need, the ‘@import‘ line already does that.

To get rid of the shadow of the menu & menu text add this to your Child Theme style.css file:

.navbar .navbar-inner {
 box-shadow: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
}

.navbar .nav > li > a { text-shadow: none; }

@jpskillz You should consider making a Child Theme: https://codex.www.ads-software.com/Child_Themes or using a Custom CSS plugin to hold your CSS modifications. Any modifications to theme files will be overwritten when the theme is updated.

Thanks for taking the time to reply. I had tried that, too.

I realize now that I mistakenly thought that simply removing the text-shadow declaration line would fix it, but I actually had to change it to 0 pixels and match the color of the text to make it go away.

So

text-shadow: 0 1px 0 white;

became

text-shadow: 0 0 0 #777777;

I don’t understand how you’re able to make these particular edits if you’re working through a Child Theme.

Here’s my wp-content/themes/customizr-child/style.css file

I test things out first using the Custom CSS feature of Customizr. If it works there, I add it to the style.css file of my child theme

/*
Theme Name: Digital Traffic Ninjas
Theme URI: http: //digitaltrafficninjas.com/
Description: This is a custom child theme for DTN for Customizr
Author: MaidaNet
Author URI: http: //maida.net/
Template: customizr
Version: 0.1.1
*/

@import url("../customizr/style.css");

/* HEADER */
.tc-header {
/*change background image */
  background-image:url('https://www.digitaltrafficninjas.com/wp-content/uploads/2013/09/cropped-ninjaz.png');
}

/* MENU NAVBAR */
.navbar .nav > li > a {
/* Change menu/navbar padding: 2nd and 4th for horiz padding.  */
  padding: 15px 16px 5px 16px;
/* and change font size in menu */
  font-size: 16px;
/* and remove text shadow */
  text-shadow: 0 0 0 #777777;
}

.navbar .navbar-inner {
/* move menu bar */
  margin: 14px 20px 10px -200px;
  padding-left: 5px;
/*shorten width */
  max-width: 97%
/*remove white background and border */
  -webkit-box-shadow: 0px 0px 0px;
  -moz-box-shadow: 0px 0px 0px;
  box-shadow: 0px 0px 0px;
  background:none;
}

Could you try this again

text-shadow: none;

And then clear your browser’s cache afterwards?

Oh! That worked, too!