Menu not showing up on mobile view (showing up white)

[kicksandchronicles]

Hello - my navigation menu is showing up white on mobile view. I would like it showing up as black as before. Not sure what changed. I tried to change it with this code, but it did not work:

.x-btn-navbar, .x-btn-navbar.collapsed a {

color: ffffff

}

Below is the custom CSS:

.x-colophon .widget_nav_menu a:hover {
background-color: 81d742;
}

.masthead-inline .x-navbar .desktop .sub-menu {
top: 100px;
}

body .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
padding-top: 27px !important;
}

body .x-navbar-fixed-top .custom-social {
margin-top: 27 !important;
}

.x-navbar .desktop .x-nav > li.menu-item.menu-logo a {
padding-top: 0px;
position: absolute;
left: -130px;
top: -17px;
}

.x-navbar .menu-logo {
display:none;
}

.x-navbar.x-navbar-fixed-top .menu-logo {
display: block;
position: relative;
}

.x-navbar-fixed-top .x-navbar-inner {
min-height: 70px;
}

.x-navbar.x-navbar-fixed-top {
height: 70px;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 0px;
padding-top: 0px;
transition: all 1s ease-out;
}

.home .x-navbar {border-bottom: 7px solid #81d742;}

.x-colophon.bottom {
border-top: 7px solid #81d742;
}

.x-navbar {
border-bottom: 7px solid #81d742;
}

.entry-featured a.entry-thumb {
background-size: contain;
}

@media (min-width: 980px) {
.x-navbar-inner .x-container.max {
width: 100%;
}

.x-breadcrumbs {
font-size: 2.5em;
}

.blog .x-container.max.width.main {
width: 100%;
max-width: 100%;
}

.blog .offset.cf {
width: 88%;
}

.x-sidebar { background: #ffffff; }

div#pages-3,
div#text-8,
div#categories-3 {
text-transform: uppercase;
}

.x-colophon .widget {
margin-top: 0;
}

.x-topbar .p-info {
color: black;
}

.x-topbar p.info {
max-height: 20px; !important;
}

.x-topbar {
position: fixed;
width: 100%;
}

.x-topbar .p-info {
font-size: 1.5rem;
}

.x-btn-navbar,
.x-btn-navbar:hover,
.x-btn-navbar.collapsed {
color: #000;
font-size: 25px;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

.x-colophon.top .x-container .x-column:nth-child(1) .textwidget {
font-size: 15px;
}

.x-colophon.top .widget_nav_menu .menu-item > a {
font-size:15px;
}

.mc4wp-form-basic, .mc4wp-form-theme {
margin: 0;
}

.x-colophon.top {
padding: 0 0 0px;
}

.x-colophon.top br {
display:none;
}

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content a {
color:#black;
}

.x-colophon.top {
padding-bottom: 0;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content a,
.x-colophon.bottom .x-social-global a {
color: #000 !important;
}

.x-colophon.top .h-widget, .x-colophon.top a, .x-colophon.top .widget {
color: black;
}

.x-colophon.top .textwidget > p {
margin-bottom: 0;
}

@media (max-width: 545px) {

aside.x-sidebar.right {
    float: left;
}

.x-sidebar .widget:first-child {
    padding-left: 15px;
}

.x-sidebar .widget:first-child center {
    text-align: left;
}

.x-sidebar .widget {
width: 100% !important;

  @media (min-width: 980px) {

body .custom-social {
right: 0;
position: absolute;
top: 10px;
}
}

.x-topbar .x-social-global {
display: none;
}

.x-topbar .x-social-global a {
font-size: 2rem;
}

.x-topbar .x-social-global a {
color: #000000;
}

.x-social-global i {
height: 15px;
width: 23px;
}

.custom-social a {
color: 000000;
font-size: 23px;
margin-right: 12px;
}

.custom-social a {
display: inline-block;
}

body .custom-social {
	float: right;
	text-align: right;
}

}

.x-navbar-fixed-top .custom-social{
margin-top: 10px;
transition: all 1s ease-out;
}

[Prasant]

Hello @kicksandchronicles,

Thanks for asking.

Can you please share website URL for us to take closer look? Additionally, please try changing navigation color from X > Launch > Options > Layout and Designs > Links - Text > Navbar links and Navbar Links Hover.

Thanks.

[kicksandchronicles]

Thank you for your quick reply!

Sure - it’s sportbotanics.com. I checked that already from another thread and it wasn’t the case.

Do you have possibly another solution? I would be very thankful

[kicksandchronicles]

Also, when I scroll down, my nav bar and logo are supposed to get smaller. I checked the javascript (below) and everything seems right from before. Can you please also advise on this?

jQuery(function($) {
$(’.x-navbar #menu-menu’).prepend( ‘

<img width=50" src=“https://sportbotanics.com/wp-content/uploads/2016/08/Sport-Botanics-Specimen-USPTO.png”>

’ );

});

[nabeel]

Hi again,

There is a syntax error in your Customizer, if you’ve added any <script> tag in your the Customizer then please remove it and then check the site again, it should work fine.

Let us know how this goes!

[kicksandchronicles]

Okay, thank you! That fixed the logo appearance in the collapsed menu. However, can you please advise on the on actual menu icon not showing up on mobile view? That function still shows up as white, which is also the color of my background.

[Prasant]

Hello @kicksandchronicles,

Thanks for asking.

Please add following CSS under X > Launch > Options > CSS to change hamburger menu color:

.x-btn-navbar.collapsed {color: #81d842;}

a.x-btn-navbar {color: #81d842 !important;}

Thanks.

[kicksandchronicles]

Great You fixed it! Thank you very much!

[rad]

You’re most welcome!