[Resolved] How to Style the Responsive Menu (hamburger) Button?

[Author]

Posts

[benjaminD-4]

Hello!

I tried my best to find the solution in the forum but was not able to. This seems like it should be simple, but I am a CSS novice so may be missing something obvious.

I am trying to:

1. Change the position of the responsive (hamburger) menu button. I want to move it up so it is aligned with the logo, instead of being pushed down to its own line.

2. Change the background colors for the same responsive menu button, the dropdown menu items, including active and non-active options.

I visited this URL: hidden link

I tried using my browser's web inspector to figure out the correct CSS selectors, but I can't for the life of me get any of them to work.

Here's the most recent code I tried (added to Layouts CSS and JS Editor), but it didn't work:

/* trying to select the hamburger menu - have not figured this out yet  */
.dropdown-menu .ddl-dropdown-menu .ddl-navbar-default .ddl-navbar-toggle {
	background-color: black !important;
}

I am using the Toolset starter theme. I also tried looking in Appearance Customizer but could not find a way to accomplish what I need.

What am I missing?

Thanks!

[Tia]

Thank you for contacting Toolset Support. I am happy to help you with this.

To align the hamburger menu icon, the code is:

#main-menu button {
  position: relative;
  top: -3.8em;
}

To change the link colors:

#main-menu a {
  background: black !important;
  color: #fff !important;
}
#main-menu a:hover {
  background: grey !important;
  color: #fff !important;
}
#main-menu .current_page_item a{
  background: blue !important;
  color: #fff !important;
}

Please let me know if this answers your questions or if it needs more investigation.

[benjaminD-4]

This worked perfectly.

Thank you!