How to change the color of the mobile menu

Sparkling
1

Hello,

I have a question about the mobile menu (Hamburger) which appears on a smaller width.
I want to change the color of the bars, but I can’t find how or the right id.
Can you help me?

Thanks!

Kind regard,
Marloes

2

Dear Marloes,

You can beter install a plugin to change the mobile menu. The current mobile menu has some bad bugs.

Plugin called Responsive Menu, Use the code [responsive-menu] (you need to active this option in de plugin).

You need to make a child-theme if you not already got one.
Copy the header.php into your child-theme and edit the following:
Paste <?php echo do_shortcode( ‘[responsive-menu]’ ); ?>
after <?php sparkling_header_menu(); ?>

CSS:

/* change menu to RESPONSIVE MENU PLUGIN from 800px - Also active the code in the header.php*/
*.navbar-toggle {
	visibility:hidden;
}

Some more css that can help you style the responsive menu

#click-menu .threeLines	{
	margin-top: 0px !important;
}
#click-menu 	{
	border:1px solid #6b6b6b;
	width:46px; !important;
	height:40px;
	background-color:#FFF;
	border-radius: 5px;
}

#responsive-menu	{
	padding:0px !important;
	padding-top:10px !important;
	margin:0px !important;
	height:auto !important;
	}
 
#responsive-menu #responsive-menu-title	{
	padding:0px !important;
	padding-left:5% !important;
	padding-top:15px !important;
	width:200px !important;
	height: 40px !important;
	margin:0px !important;
	}

#rm-additional-content	{
		padding-top:0px !important;
		height:0px !important;
		margin:0px !important;
}

#responsive-menu .responsive-menu li li a	{
	padding-left:2% !important;
		margin-left:0px !important;
				width:98% !important;
}

#responsive-menu .responsive-menu li li li a	{
	padding-left:5% !important;
		margin-left:0px !important;
		width:95% !important;
}

#responsive-menu .responsive-menu ul.sub-menu { padding-left: 30px !important }

.appendLink 	{
	width:40px;
}

menu-item	{
	padding:0px !important;
	margin:0px !important;
	background-color: #309;
}

menu-item-type-custom	{
	padding:0px !important;
	margin:0px !important;
	background-color: #309;
}

menu-item-object-custom	{
	padding:0px !important;
	margin:0px !important;
	background-color: #309;
}

menu-item-has-childre	{
	padding:0px !important;
	margin:0px !important;
	background-color: #309;
}

.sub-menu ul {
	padding-left:-50px !important;
	margin:0px !important;
	
}
.sub-menu ul li {
	padding-left:-50px !important;
	margin:0px !important;
	
}
.sub-menu ul li li {
	padding-left:-50px !important;
	margin:0px !important;
	
}

#responsive-menu .responsive-menu ul {
	padding-left:-50px !important;
	margin:0px !important;
	
}
#responsive-menu .responsive-menu ul li {
	padding-left:-50px !important;
	margin:0px !important;
	
}
#responsive-menu .responsive-menu ul li li {
	padding-left:-50px !important;
	margin:0px !important;
	
}