Responsive menu: edit text color and center drop-down alignment – education pro

[lilysimulado]

Hi everyone, I'm currently stuck trying to edit the text color of the responsive menu and align the dropdown menu box to the center.

Currently when clicking on the sites menu icon on my phone I can't see the text and I think it's because the background and the text is white. Can anyone please point me on the right direction to change the text color of the responsive menu.

My current code is

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
        margin-left: -400px;
}

.responsive-menu-icon::before {
	content: "\f333";
        color: #0000FF;
        display: block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center !important;
}

Thanks for taking the time to help.

Lily

http://theprepbook.com

[mickmel]

Around line 2453, the color is set to white; change it to something else and that should fix the display issues.

[lilysimulado]

Thanks mickmel that worked brilliantly! Now I just have to adjust to center the dropdown menu, right now it's always showing to the far right which makes it hard to see when using a mobile. I have tried to adjust some of the code below to center it but can't seem to get the dropdown menu box to move, do you have any advice on what to edit to make that happen?

	.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover,
	.genesis-nav-menu.responsive-menu li.current-menu-item > a {
		background: none;
		color: #444;
		display: block;
		line-height: 1;
		padding: 12px 0;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}
	
	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f347";
		float: right;
		font: normal 16px/1 'dashicons';
		height: 16px;
		padding: 11px 0;
		right: 0;
		text-align: right;
		z-index: 9999;
	}
	
	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu {
		left: auto;
		opacity: 1;
		position: relative;
		-moz-transition:    opacity .4s ease-in-out;
		-ms-transition:     opacity .4s ease-in-out;
		-o-transition:      opacity .4s ease-in-out;
		-webkit-transition: opacity .4s ease-in-out;
		transition:         opacity .4s ease-in-out;
		width: 100%;
		z-index: 99;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		padding-left: 20px;
		margin: 0;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		box-shadow: none;
		color: #444;
		padding: 12px 0;
		position: relative;
		width: 100%;
	}
	
	.genesis-nav-menu.responsive-menu {
		padding-bottom: 16px;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a {
		background: none;
		color: #000000;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
		background: none;
		color: #e7e7e7;
	}

Thank you again!

[Author]

Posts