WordPress.org

Forums

[resolved] css navigation menu editing (8 posts)

  1. newbieWW
    Member
    Posted 1 year 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 :'( .

  2. Andrew
    Forum moderator
    Posted 1 year 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.

  3. WPyogi
    Forum Moderator
    Posted 1 year 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/

  4. newbieWW
    Member
    Posted 1 year 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 :(

  5. newbieWW
    Member
    Posted 1 year 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 !?

  6. Andrew
    Forum moderator
    Posted 1 year 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.

  7. newbieWW
    Member
    Posted 1 year 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 ?

  8. newbieWW
    Member
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.