css navigation menu editing

  • Resolved newbieWW

    (@newbieww)


    10 years, 5 months ago

    I’m using a mystile theme before you say it’s better to ask in their support forum. I’m asking this in general
    In this theme it allows different different custom css files to load different themes, i tried in every one of those css including default css. to my surprize each and every on of those have same code for navigation menu how is this possible?

    /* 2.2 Navigation */
ul.nav li a {
  padding: .5em 1em;
  display: block;
}
#navigation {
  clear: both;
  margin-bottom: 2.618em;
  display: none;
}
#navigation ul {
  list-style: none;
}
/* Optional Styling */
#navigation {
  border: 1px solid #d5dadd;
  -webkit-border-radius: 0.327em;
  border-radius: 0.327em;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
  /* Saf4+, Chrome */

  background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
  /* Chrome 10+, Saf5.1+, iOS 5+ */

  background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
  /* FF3.6+ */

  background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
  /* IE10 */

  background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
  /* Opera 11.10+ */

  background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.03);
}

    even after I tried and edit each and everyone of them but nothing happened i wanted to create buttons with read navigation menu background
    I don’t know where to edit anymore 🙁
    please help me :'( .

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    In general use a Custom CSS plugin to hold your CSS modifications or set up a Child Theme and work in the (Child theme) style.css file.

    WPyogi

    (@wpyogi)

    10 years, 5 months ago

    You also need to use sufficiently specific CSS to override the existing CSS –

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    And ensure that you don’t have any errors that may be invalidating your CSS:

    http://jigsaw.w3.org/css-validator/

    Thread Starter newbieWW

    (@newbieww)

    10 years, 5 months ago

    @andrew
    I have a child theme but I don’t know what and where should I add script so that I can change my menu button so I backed up my main files and tried editing it so that i can locate it but nothing happened 🙁

    Thread Starter newbieWW

    (@newbieww)

    10 years, 5 months ago

    OK! with the great help of chrome’s inspect element i was able to determine which values should be changed,now this theme css resides within the themefolder/styles/red.css so I should create a a red.css in child theme/styles/ and then…….them what just paste all those codes responsible, and change the values !?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    You need to keep your CSS modifications in the style.css file of your Child Theme, even if the parent theme uses differently named CSS files.

    Thread Starter newbieWW

    (@newbieww)

    10 years, 5 months ago

    @wpyogi thankyou so much for that Specificity according to that If I put put a !important in the above code say like this
    background-image: linear-gradient(to bottom, #ffffff, #f5f5f5 !important );
    and put that in my style.css in my child theme will it work ?

    Thread Starter newbieWW

    (@newbieww)

    10 years, 5 months ago

    thankyou so much Andrew and WPyogi I was finally able to edit my nav menu but I’ve some other issues now, please see my follow-up post here

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘css navigation menu editing’ is closed to new replies.