Interpreting Firebug CSS

  • Resolved siobhan61

    (@siobhan61)


    9 years, 11 months ago

    I’m trying to change the border color for the top menu of my website in my child theme CSS. This is what Firebug’s Inspect Element shows me:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #EDEDED;
    border-top: 1px solid #EDEDED;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    }

    If I change the color in Firebug, it changes onscreen. However, when I copy this to my child theme CSS and change the color there, nothing happens. I have a feeling the CSS I see in Firebug is not in the correct format, but I don’t know how to format it.

    Any help appreciated, thanks! — Cheryl

Viewing 10 replies - 1 through 10 (of 10 total)
  • stephencottontail

    (@stephencottontail)

    9 years, 11 months ago

    The formatting looks right, so you’re likely running into a cache issue. Try force-refreshing your browser (check your browser’s documentation for more details).

    Thread Starter siobhan61

    (@siobhan61)

    9 years, 11 months ago

    I can change some things — like background color — and it shows up right away. But these smaller items (I also tried to format a nested list) work when I test them in Firebug but not when I copy the CSS to my child theme.

    stephencottontail

    (@stephencottontail)

    9 years, 11 months ago

    What theme are you using? Can you provide a link to your website?

    Thread Starter siobhan61

    (@siobhan61)

    9 years, 11 months ago

    I’ve created a child theme from Twenty-twelve. My website is cheryldonahue.com (just a shell at the moment)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 11 months ago

    Close this style off:

    .site-header h1 a, .site-header h2 a {
    color: #000;
    display: inline-block;
    text-decoration: none;

    Thread Starter siobhan61

    (@siobhan61)

    9 years, 11 months ago

    Thanks for catching that Andrew! I closed it but the other issues persist.

    Thread Starter siobhan61

    (@siobhan61)

    9 years, 11 months ago

    Ah, I was able to format the nested list (see Services page) but still can’t get the nav menu borders to change color!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 years, 11 months ago

    Look closer at the selectors you’re using, they’re not right.
    It should be this:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul

    Thread Starter siobhan61

    (@siobhan61)

    9 years, 11 months ago

    Ah — another good catch. I changed it before when I was troubleshooting and forgot to change it back.

    So it looks like that open style was the problem — thanks Andrew!

    Thread Starter siobhan61

    (@siobhan61)

    9 years, 11 months ago

    and that’s why I could change the page background — because it was in front of the open style. It all makes sense…

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Interpreting Firebug CSS’ is closed to new replies.