Support » Theme: Bouquet » Can't change menu background color by modifying #access

  • Resolved debover

    (@debover)


    I have spent waaaaay too much time trying to figure this out by reading all relevant posts here and on google.
    I’m working on my local server before putting it live and want to change the menu background color from #b14562 to #d34848. Here’s the code as I modified it, but nothing happens. I have tried several things, but again, nothing happens. Zero change takes place. Can anyone help???

    #access {
    background: d34848;
    box-shadow: 5px -5px 5px -5px rgba(0, 0, 0, 0.5);
    display: block;
    float: left;
    margin: 0 auto;
    width: 69.6%;
    }

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi there – this should do the trick:

    #access {
      background-color: #d34848;
    }

    Keep in mind that you always need a # before your hexadecimal colour code. 🙂

    Let me know how it goes!

    Also keep in mind – don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

    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.

    Thanks for you response Kathryn! I have to say that this is embarrassing, I do realize the necessity of the # in front of the color and don’t even know how I posted such a mistake. Long story short, I tried exactly what you posted, as well as many other things, but nothing worked until I did this:

    #access {
    background: #a53838!important;
    }

    I know that using !important is not ideal but could find no other way to change the menu background in the Bouquet theme. I had modified everything else on the site to more of a reddish coral so the berry colored menu bar looked hideous.

    I totally open to any additional suggestions you have.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Could you provide a link to your site so I can see where you’re applying the code? It worked without !important in my testing. Thanks!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Ah, you mentioned you’re on a localhost.

    Could you tell me exactly where you’re putting the code? Are you using a child theme, or a custom CSS plugin?

    Child theme

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Thanks for letting me know. I tested the menu background colour with a child theme and I see what you mean – I had tested with Firebug earlier on the demo site. Because of the way the theme enqueues the optional colour schemes, you will need !important to override the existing CSS. To avoid having to do that, you would have to add a custom function to dequeue the optional colour schemes, which in this case probably isn’t worth it. 🙂

    Thanks Kathryn for confirming this. I hope this thread will prevent someone else from wasting as much time as I did figuring this out.

    Kathryn, I really want to thank you for taking your time to help me so thoroughly!!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    My pleasure, glad you’re set. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Can't change menu background color by modifying #access’ is closed to new replies.