Changing mobile menu background colour

  • Resolved -Rich-

    (@-rich-)


    11 years, 2 months ago

    Hi

    I’ve got a strange problem I can’t figure out. I want to change the colour of the background for the mobile menu to black.

    I copied the code to my CSS file in the child theme folder and changed the value to 000 but it doesn’t work. I also noticed in your CSS snippets on your website it’s the same code that I had used.

    .menu-primary,
.menu-primary-tracks {
  background-image: linear-gradient(#000 24px, transparent 24px, transparent 48px);
}

    However, if I put the same code above into the custom CSS field on the admin CP it does work and the background changes to black. Why won’t it work when I put it directly onto the child theme CSS file? All my other code is working.

Viewing 6 replies - 1 through 6 (of 6 total)
  • acp73

    (@acp73)

    11 years, 2 months ago

    Hi Rich,

    I would recommend using the WP Responsive menu plugin & then use the following CSS to hide the orginal menu:

    /*remove mobile menu*/
    #toggle-navigation {
    display: none;
    }

    In the WP Responsive Menu you can customize the menu colours.

    https://ww.wp.xz.cn/plugins/wp-responsive-menu/

    Hope that helps!

    Theme Author Ben Sibley

    (@bensibley)

    11 years, 2 months ago

    Rich,

    There are a number of things that could have gone wrong, I’ll just need to check out your site first-hand to see what the issue is. Could you share a link to your site?

    Thread Starter -Rich-

    (@-rich-)

    11 years, 2 months ago

    acp73 – Thanks I’ll take a look but ideally I don’t want to use that many plugins and would prefer to code any changes in.

    Ben – This is the link – http://rpdigiart.com/test/

    The changes on the style.css file are uploading when I check so I think it’s a coding issue. I have even removed everything from this file and just left the mobile menu code and it still didn’t work. I have tried putting !important on the code as well.

    Every change I’ve made for the menu doesn’t overwrite the parent but if I put all of this in the custom css field on the theme customiser they change! All my changes are under /*Mobile Menu*/.

    Thanks

    Theme Author Ben Sibley

    (@bensibley)

    11 years, 2 months ago

    Thanks for the link!

    The issue is coming from a missing closing bracket on this media query: http://pics.competethemes.com/image/3v0w3Z2h2d1E

    Technically, the code is being included in the preceding media query, so it is only taking affect at 900px and wider.

    Thread Starter -Rich-

    (@-rich-)

    11 years, 2 months ago

    Thanks Ben, I can’t believe one missing bracket was causing the issue, I went through all the code at least 3 times! I guess that shows how easy it is to miss something.

    How did you find it out of interest just by going through it all or is there a developer tool I could’ve used?

    Theme Author Ben Sibley

    (@bensibley)

    11 years, 2 months ago

    Since the stylesheet was loading properly I knew there must have been a syntax error, so I checked for that and was able to find the missing bracket pretty quickly.

    If you’re working with a local install of WordPress, a text editor like Sublime Text or NotePad++ will help you avoid these issues entirely. Otherwise, a plugin like Advanced Code Editor can be used to add syntax highlighting and other useful features right into the default code editor in WordPress.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Changing mobile menu background colour’ is closed to new replies.