Change colors for mobile menu

So I don’t really know what’s the correct term for it – whether either top menu, off canvas, top navigation, accordion – anyway, this post refers to the main expandable menu in a mobile WordPress template that’s usually in the top-left corner and that’s triggered by clicking on the small squared icon with the three horizontal lines. That one! ??
Now: what I’d like to do is to have a different colors for the font and the background of an item of the menu when it is active (that is: when the user is on that page). Pretty much what happens to the same menu of the WordPress admin backend page.
What do I have to adjust? All I could manage was to give the selected line a new color for like one second, till I’m still on the current page, then when the new page loads, the menu item returns to its original text font and background colors.
The section of my style.css which I think refers to the menu is the following:

/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
width: 100%;
background: none; }
.contain-to-grid .top-bar {
margin-bottom: 0; }

.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99; }
.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%; }
.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99; }
.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: 60px; }

.top-bar {
overflow: hidden;
height: 60px;
line-height: 60px;
position: relative;
background: none;
margin-bottom: 0; }
.top-bar ul {
margin-bottom: 0;
list-style: none; }
.top-bar .row {
max-width: none; }
.top-bar form,
.top-bar input {
margin-bottom: 0; }
.top-bar input {
height: auto;
padding-top: .35rem;
padding-bottom: .35rem;
font-size: 0.75rem; }
.top-bar .button {
padding-top: .45rem;
padding-bottom: .35rem;
margin-bottom: 0;
font-size: 0.75rem; }
.top-bar .title-area {
position: relative;
margin: 0; }
.top-bar .name {
height: 60px;
margin: 0;
font-size: 16px; }
.top-bar .name h1 {
line-height: 60px;
font-size: 1.0625rem;
margin: 0; }
.top-bar .name h1 a {
font-weight: normal;
color: white;
width: 50%;
display: block;
padding: 0 20px; }
.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; }
.top-bar .toggle-topbar a {
color: white;
text-transform: uppercase;
font-size: 0.8125rem;
font-weight: bold;
position: relative;
display: block;
padding: 0 20px;
height: 60px;
line-height: 60px; }
.top-bar .toggle-topbar.menu-icon {
right: 20px;
top: 50%;
margin-top: -16px;
padding-left: 40px; }
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0;
padding-right: 25px;
color: white;
position: relative; }
.top-bar .toggle-topbar.menu-icon a::after {
content: “”;
position: absolute;
right: 0;
display: block;
width: 16px;
top: 0;
height: 0;
-webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white; }
.top-bar.expanded {
height: auto;
background: transparent; }
.top-bar.expanded .title-area {
background: none; }
.top-bar.expanded .toggle-topbar a {
color: #888888; }
.top-bar.expanded .toggle-topbar a span {
-webkit-box-shadow: 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888;
box-shadow: 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888; }

.top-bar-section {
left: 0;
position: relative;
width: auto;
-webkit-transition: left 300ms ease-out;
-moz-transition: left 300ms ease-out;
transition: left 300ms ease-out; }
.top-bar-section ul {
width: 100%;
height: auto;
display: block;
background: #333333;
font-size: 16px;
margin: 0; }
.top-bar-section .divider,
.top-bar-section [role=”separator”] {
border-top: solid 1px #51002b;
clear: both;
height: 1px;
width: 100%; }
.top-bar-section ul li > a {
display: block;
width: 100%;
color: white;
padding: 12px 0 12px 0;
padding-left: 20px;
font-family: “Quicksand”, “Open Sans”, sans-serif;
font-size: 0.75rem;
font-weight: normal;
background: #333333; }
.top-bar-section ul li > a.button {
background: #a10056;
font-size: 0.75rem;
padding-right: 20px;
padding-left: 20px; }
.top-bar-section ul li > a.button:hover {
background: #76003f; }
.top-bar-section ul li > a.button.secondary {
background: #e7e7e7; }
.top-bar-section ul li > a.button.secondary:hover {
background: #cecece; }
.top-bar-section ul li > a.button.success {
background: #43ac6a; }
.top-bar-section ul li > a.button.success:hover {
background: #358854; }
.top-bar-section ul li > a.button.alert {
background: #a10056; }
.top-bar-section ul li > a.button.alert:hover {
background: #840047; }
.top-bar-section ul li:hover > a {
background: #c20068;
color: white; }
.top-bar-section ul li.active > a {
background: #c20068;
color: white; }
.top-bar-section ul li.active > a:hover {
background: #a9005a;
color: white; }
.top-bar-section .has-form {
padding: 20px; }
.top-bar-section .has-dropdown {
position: relative; }
.top-bar-section .has-dropdown > a:after {
content: “”;
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
border-left-style: solid;
margin-right: 20px;
margin-top: -4.5px;
position: absolute;
top: 50%;
right: 0; }
.top-bar-section .has-dropdown.moved {
position: static; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: block; }
.top-bar-section .dropdown {
position: absolute;
left: 100%;
top: 0;
display: none;
z-index: 99; }
.top-bar-section .dropdown li {
width: 100%;
height: auto; }
.top-bar-section .dropdown li a {
font-weight: normal;
padding: 8px 20px; }
.top-bar-section .dropdown li a.parent-link {
font-weight: normal; }
.top-bar-section .dropdown li.title h5 {
margin-bottom: 0; }
.top-bar-section .dropdown li.title h5 a {
color: white;
line-height: 30px;
display: block; }
.top-bar-section .dropdown li.has-form {
padding: 8px 20px; }
.top-bar-section .dropdown li .button {
top: auto; }
.top-bar-section .dropdown label {
padding: 8px 20px 2px;
margin-bottom: 0;
text-transform: uppercase;
color: #777777;
font-weight: bold;
font-size: 0.625rem; }

.js-generated {
display: block; }

@media only screen and (min-width: 40.063em) {
.top-bar {
background: none;
*zoom: 1;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: ” “;
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: none; }

.contain-to-grid .top-bar {
max-width: 60rem;
margin: 0 auto;
margin-bottom: 0; }

.top-bar-section {
-webkit-transition: none 0 0;
-moz-transition: none 0 0;
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background: #c20068;
color: white; }
.top-bar-section li:not(.has-form) a:not(.button) {
padding: 0 20px;
line-height: 60px;
background: none; }
.top-bar-section li:not(.has-form) a:not(.button):hover {
background: #c20068; }
.top-bar-section .has-dropdown > a {
padding-right: 40px !important; }
.top-bar-section .has-dropdown > a:after {
content: “”;
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 30px; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: none; }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: “0bb”;
top: 1rem;
margin-top: -2px;
right: 5px;
line-height: 1.2; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: white;
line-height: 1;
white-space: nowrap;
padding: 12px 20px;
background: #333333; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role=”separator”] {
border-bottom: none;
border-top: none;
border-right: solid 1px #ce006e;
clear: none;
height: 60px;
width: 0; }
.top-bar-section .has-form {
background: none;
padding: 0 20px;
height: 60px; }
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }

.no-js .top-bar-section ul li:hover > a {
background: #c20068;
color: white; }
.no-js .top-bar-section ul li:active > a {
background: #c20068;
color: white; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block; } }
.off-canvas-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
overflow: hidden; }

.inner-wrap {
-webkit-backface-visibility: hidden;
position: relative;
width: 100%;
*zoom: 1;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease; }
.inner-wrap:before, .inner-wrap:after {
content: ” “;
display: table; }
.inner-wrap:after {
clear: both; }

nav.tab-bar {
-webkit-backface-visibility: hidden;
background: #e7e7e7;
color: #333333;
height: 3.125rem;
line-height: 3.125rem;
position: relative; }
nav.tab-bar h1, nav.tab-bar h2, nav.tab-bar h3, nav.tab-bar h4, nav.tab-bar h5, nav.tab-bar h6 {
color: white;
font-weight: bold;
line-height: 3.125rem;
margin: 0; }
nav.tab-bar h1, nav.tab-bar h2, nav.tab-bar h3, nav.tab-bar h4 {
font-size: 1.125rem; }

section.left-small {
width: 3.125rem;
height: 3.125rem;
position: absolute;
top: 0;
border-right: none;
box-shadow: 1px 0 0 white;
left: 0; }

section.right-small {
width: 3.125rem;
height: 3.125rem;
position: absolute;
top: 0;
border-left: none;
box-shadow: -1px 0 0 #cecece;
right: 0; }

section.tab-bar-section {
padding: 0 0.625rem 0 0;
position: absolute;
text-align: center;
height: 3.125rem;
top: 0; }
@media only screen and (min-width: 40.063em) {
section.tab-bar-section {
text-align: left; } }
section.tab-bar-section.left {
left: 0;
right: 3.125rem; }
section.tab-bar-section.right {
left: 3.125rem;
right: 0; }
section.tab-bar-section.middle {
left: 3.125rem;
right: 3.125rem; }

a.menu-icon {
text-indent: 2.1875rem;
width: 3.125rem;
height: 3.125rem;
display: block;
line-height: 2.0625rem;
padding: 0;
color: white;
position: relative; }
a.menu-icon span {
position: absolute;
display: block;
width: 1rem;
height: 0;
left: 0.8125rem;
top: 0.625rem;
-webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white; }
a.menu-icon:hover span {
-webkit-box-shadow: 0 10px 0 1px #b3b3b3, 0 16px 0 1px #b3b3b3, 0 22px 0 1px #b3b3b3;
box-shadow: 0 10px 0 1px #b3b3b3, 0 16px 0 1px #b3b3b3, 0 22px 0 1px #b3b3b3; }

.left-off-canvas-menu {
-webkit-backface-visibility: hidden;
width: 250px;
top: 0;
bottom: 0;
height: 100%;
position: absolute;
overflow-y: auto;
background: #333333;
z-index: 1001;
box-sizing: content-box;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.left-off-canvas-menu * {
-webkit-backface-visibility: hidden; }

.right-off-canvas-menu {
-webkit-backface-visibility: hidden;
width: 250px;
top: 0;
bottom: 0;
height: 100%;
position: absolute;
overflow-y: auto;
background: #333333;
z-index: 1001;
box-sizing: content-box;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
right: 0; }

ul.off-canvas-list {
list-style-type: none;
padding: 0;
margin: 0; }
ul.off-canvas-list li label {
padding: 0.3rem 0.9375rem;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
background: #a10056;
border-top: 1px solid #c20068;
border-bottom: none;
margin: 0; }
ul.off-canvas-list li a {
display: block;
padding: 0.66667rem;
color: #ffffff;
background-color: transparent;
border-bottom: none; }

.move-right > .inner-wrap {
-webkit-transform: translate3d(250px, 0, 0);
-moz-transform: translate3d(250px, 0, 0);
-ms-transform: translate3d(250px, 0, 0);
-o-transform: translate3d(250px, 0, 0);
transform: translate3d(250px, 0, 0); }
.move-right a.exit-off-canvas {
-webkit-backface-visibility: hidden;
transition: background 300ms ease;
cursor: pointer;
box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.2);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1002; }
@media only screen and (min-width: 40.063em) {
.move-right a.exit-off-canvas:hover {
background: rgba(255, 255, 255, 0.05); } }

.move-left > .inner-wrap {
-webkit-transform: translate3d(-250px, 0, 0);
-moz-transform: translate3d(-250px, 0, 0);
-ms-transform: translate3d(-250px, 0, 0);
-o-transform: translate3d(-250px, 0, 0);
transform: translate3d(-250px, 0, 0); }
.move-left a.exit-off-canvas {
-webkit-backface-visibility: hidden;
transition: background 300ms ease;
cursor: pointer;
box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.2);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1002; }
@media only screen and (min-width: 40.063em) {
.move-left a.exit-off-canvas:hover {
background: rgba(255, 255, 255, 0.05); } }

.lt-ie10 .left-off-canvas-menu {
left: -250px; }
.lt-ie10 .right-off-canvas-menu {
right: -250px; }
.lt-ie10 .move-left > .inner-wrap {
right: 250px; }
.lt-ie10 .move-right > .inner-wrap {
left: 250px; }