asked on

Why is this Wordpress mobile menu not following the CSS?

http://hakutah.com/

Take a look at mobile menu. The text is white. The CSS is set to have the text as a dark brown color but something seems to be overriding it.

Here is the CSS that I believe SHOULD be working. In firebug, I see no other CSS that is taking priority, but something certainly is.
.et_mobile_nav_menu a {
color:#31180D !important;
}

I'm no CSS genius, and I'm sure I'm overlooking something obvious, but it escapes me. Lastly, I didn't design or build this site, so while I'm familiar with the tools, I don't know what else could be causing this issue.

Snarf0001

It's because the actual content, both the "MENU" text and the nav bar are pseudo tags, :before and :after, both of which are overriding the color on the parent <a> tag.

The color for both is being overridden in style.css:

#et_search_icon:hover,
.mobile_menu_bar:before,
.mobile_menu_bar:after,
.et-social-icon a:hover,
.comment-reply-link,
.form-submit .et_pb_button,
.entry-summary p.price ins,
.woocommerce div.product span.price,
.woocommerce-page div.product span.price,
.woocommerce #content div.product span.price,
.woocommerce-page #content div.product span.price,
.woocommerce div.product p.price,
.woocommerce-page div.product p.price,
.woocommerce #content div.product p.price,
.woocommerce-page #content div.product p.price,
.woocommerce .star-rating span:before,
.woocommerce-page .star-rating span:before,
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce #content input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce a.button,
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce input.button,
.woocommerce-page input.button,
.woocommerce #respond input#submit,
.woocommerce-page #respond input#submit,
.woocommerce #content input.button,
.woocommerce-page #content input.button,
.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page #respond input#submit.alt:hover,
.woocommerce #content input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,
.woocommerce a.button:hover,
.woocommerce-page a.button:hover,
.woocommerce button.button,
.woocommerce-page button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page #respond input#submit:hover,
.woocommerce #content input.button:hover,
.wp-pagenavi span.current,
.wp-pagenavi a:hover,
.et_password_protected_form .et_submit_button,
.nav-single a,
.posted_in a,
#top-menu li.current-menu-ancestor > a,
#top-menu li.current-menu-item > a,
.bottom-nav li.current-menu-item > a,
.footer-widget h4 {
	color: #2ea3f2;
}

Open in new window

and then the hamburger icon is being overridden again in et-core-unified:

@media only screen and (max-width: 980px) {
    #main-header,#main-header .nav li ul,.et-search-form,#main-header .et_mobile_menu {
        background-color:#31180d
    }

    .et_header_style_centered .mobile_nav .select_page,.et_header_style_split .mobile_nav .select_page,.et_mobile_menu li a,.mobile_menu_bar:before,.et_nav_text_color_light #top-menu>li>a,.et_nav_text_color_dark #top-menu>li>a,#top-menu a,.et_mobile_menu li a,#et_search_icon:before,#et_top_search .et-search-form input,.et_search_form_container input,#et-top-navigation .et-cart-info {
        color: #ffffff
    }

    .et_close_search_field:after {
        color: #ffffff!important
    }

    .et_search_form_container input::-moz-placeholder {
        color: #ffffff
    }

    .et_search_form_container input::-webkit-input-placeholder {
        color: #ffffff
    }

    .et_search_form_container input:-ms-input-placeholder {
        color: #ffffff
    }
}

Open in new window

Snarf0001

Ignore that, I now see you meant the actual text of the menu ITEMS, not the menu link itself.
In which case there's an additional !mportant tag overriding yours in the et-core:

.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu ul li a {
    font-size: 15px;
    color: #ffffff!important
}

Open in new window

John Hopkins

ASKER

Thanks, @Snarf001.
That makes some sense to me, but the color that code is pushing is #2ea3f2 (blue), while the text on the menu is either white or transparent. Is it the et-core-unified code that is causing it to be white?

This site uses divi and has a plugin for the mobile menu. Both of those have the text set to be something that is not white.

OK, just saw your last message. I'll look into this.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.