Toggle dropdown no text visible

I’m a totally layperson concerning CSS. I ask for understanding.

Here’s my problem. When I click on the Menu on a mobile device there’s no text appearing in the dropdown menu (theme WordPress Twenty Seventeen).

/* Menu toggle */

.menu-toggle {
background-color: #594b3a;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: #ccba8d;
display: flex;
font-size: 14px;
font-size: 0.875rem;
font-weight: 800;
line-height: 1.5;
margin: 1px auto 2px;
padding: 1em;
text-shadow: none;

}

/* Display the menu toggle when JavaScript is available. */

.js .menu-toggle {
display: block;

}

.main-navigation.toggled-on ul.nav-menu {
display: block;

}

.menu-toggle:hover,
.menu-toggle:focus {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;

}

.menu-toggle .icon {
margin-right: 0.5em;
top: -2px;

}

.menu-toggle:focus {
outline: thin solid;

}

.toggled-on .menu-toggle .icon-bars,
.menu-toggle .icon-close {
display: none;

}

.toggled-on .menu-toggle .icon-close {
display: inline-block;

/* Dropdown Toggle */

.dropdown-toggle {
background-color: #594b3a;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
display: block;
font-size: 16px;
right: -0.5em;
line-height: 1.5;
margin: 0 auto;
padding: 0.5em;
position: absolute;
text-shadow: none;
top: 0;

}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
background: #594b3a;

}

.dropdown-toggle:focus {
outline: thin dotted;

}

.dropdown-toggle.toggled-on .icon {
-ms-transform: rotate(-180deg); /* IE 9 */
-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
transform: rotate(-180deg);

}

Thanks for your answer in advance.

Read more here:: Toggle dropdown no text visible

Leave a Reply

Your email address will not be published. Required fields are marked *