Cannot change background colour of toggle menu button

  • Resolved toriaa

    (@toriaa)


    4 years, 9 months ago

    Hi

    I’m using a child theme for Twenty Twelve and I’m trying to change the background colour of the mobile menu button for the main navigation at the top of the page. I’ve searched the internet but still cannot get it to work. I can make the button look semi transparent but not change the actual background colour (putting important won’t make it work either).

    This code isn’t on there right now because it won’t work so I’ve taken it off at the moment but this is the sort of code I’ve tried using… 

    .menu-toggle, .menu-toggle:active
{
   background-color: #ff99ff !important;
      }

    I’ve used CSS for years so can understand code but this button is a mystery to me.

    Can anyone help?

    The page I need help with: [log in to see the link]

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

  • there is also a background-image style declared for the button(s);
    from style.css of the theme:

    /* Buttons */
.menu-toggle,
input[type="submit"],
input[type="button"],
input[type="reset"],
article.post-password-required input[type=submit],
.bypostauthor cite span {
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(to bottom, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}

    using ‘inspect element’ or ‘inspect’ on right-click in your browser might have shown the actual CSS being used for the button.

    if you’d tried the CSS below, that might have worked: 

    .menu-toggle, .menu-toggle:active
{  background: #f9f!important; }

    or try to add background-image: none; to your CSS:

    .menu-toggle, .menu-toggle:active
{
   background-color: #ff99ff !important;
   background-image: none;
      }
    Thread Starter toriaa

    (@toriaa)

    It’s working, thank you so much! It was the gradient that was over-riding everything. I’ve now styled the button to match my blog’s layout.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Cannot change background colour of toggle menu button’ is closed to new replies.