Menu items not visible on Mobile devices – Can't Navigate

You have a media query at 643px:

ul.nav-menu, div.nav-menu > ul {
    display: none;
}

Lets add this to your custom CSS plugin:

@media screen and (max-width: 643px) {
ul.nav-menu, div.nav-menu > ul {
    display: block!important;
}}

Or remove the original one if you can find where it

Dan

Did you intentionally hide the drop-down that usually appears on smaller viewports in your child theme? That is, you have this CSS rule in your child style.css file:

.menu-toggle {
	display: none;
}

But there are no media query sections in your child style.css file to display it once the view port reaches a certain size.

Here’s the pertinent CSS media query section from the parent style.css file, try copying it to the end of your child theme’s style.css file.

@media (max-width: 643px) {
	/* Small menu */
	.menu-toggle {
		cursor: pointer;
		display: inline-block;
		color: #fff;
		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
		margin: 0;
		padding: 12px 0 12px 20px;
	}

	.menu-toggle:after {
		content: "\f502";
		font-size: 12px;
		padding-left: 8px;
		vertical-align: -4px;
	}

	.toggled-on .menu-toggle:after {
		content: "\f500";
		vertical-align: 2px;
	}

	.toggled-on .nav-menu,
	.toggled-on .nav-menu > ul {
		display: block;
		margin-left: 0;
		padding: 0;
		width: 100%;
	}

	.toggled-on li,
	.toggled-on .children {
		display: block;
	}

	.toggled-on .nav-menu li > ul {
		background-color: transparent;
		display: block;
		float: none;
		margin-left: 20px;
		position: relative;
		left: auto;
		top: auto;
	}

	.toggled-on .nav-menu li > ul a {
		color: #141412;
		width: auto;
	}

	.toggled-on .nav-menu li:hover > a,
	.toggled-on .nav-menu .children a {
		background-color: transparent;
		color: #141412;
	}

	.toggled-on .nav-menu li a:hover,
	.toggled-on .nav-menu ul a:hover {
		background-color: #db572f;
		color: #fff;
	}

	ul.nav-menu,
	div.nav-menu > ul {
		display: none;
	}
}

I have a question that is somehow related and I can’t find an answer to it here.
Can you explain to me what the css code….menu-toggle:after { content: “\f502”; } means…
I realize that it may be an image that is supposed to show up next to the responsive menu but I just get a little square with the F502 written in it…
can you maybe clarify for me what it is and how I replace it with an image…
Thanks