[Resolved] Color for Current Menu Item in Primary Navigation

[Cecilia]

Hi there!
I’ve adjusted the colors for my primary menu, using the Customizer.

I had set a background color for the current item and got it to work.

I noticed that since I did not have a background set for the whole menu it was difficult to read when opening the mobile menu. So I set a background color that.

Now I can not get the background color for current item to show. (And yes, it was a different color.)

I have tried out settings back and forth but no luck so far. I’ve searched the forum but can not find a similar Q & A.

Now I have changed the settings back to what they were before I started, i.e no background color.

My settings in the customizer are:
Background (none)
Text #443235
Background Hover (none)
Text Hover #916a70
Background Current #3c3c3d (*)
Text Current #916a70

(*) This is not the color I want, I just set it to something dark so that it really shows.

I know that sometimes caching can be an issue; changes I made don’t show.
So just to make sure I have cleared the chache.

I have also viewed the site on Mac using Safari, Chrome, and Firefox. And with a PC using Chrome and Internet Explorer. All showing (or rather not showing) the same thing.

Any ideas what I can do to get the current menu item to “light up” the background using the color I’ve set in the Customizer?

/Cecilia

[Leo]

Hi there,

Can you make sure this line is not included in your child theme?

[Cecilia]

I have not done any color changes in my child theme. But perhaps something else that I did affect this?
Here is the full content of the changes I made in my child theme’s CSS:

/*
CTC Separate Stylesheet
Updated: 2018-01-24 11:42:52
*/

img {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
button, input {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.button {
    -moz-border-radius: 3px !important;
    -webkit-border-radius: 3px !important;
    -o-border-radius: 3px !important;
    border-radius: 3px !important;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.page-content, .entry-content, .entry-summary {
    margin-top: 1.5em;
}
embed, iframe, object {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.entry-header {
    text-align: center;
}
.contained-content.separate-containers .inside-article, .contained-content.one-container .site-content {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    padding: 30px;
}
.entry-content p a {
    text-decoration: underline;
    text-underline-position: under !important;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.wp-show-posts-inner :last-child {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.post-image + .entry-header {
    text-align: left;
}
body.single .grid-container {
    max-width: 700px !important;
}
.comments-area {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
.inside-article {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

And I also added some code in functions.php, that Tom helped me with.

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
         
if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'generate-style-grid','generate-style','generate-style','generate-mobile-style','font-awesome-essentials' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );

// END ENQUEUE PARENT ACTION
// 
// 
		add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
					function tu_excerpt_metabox_more( $excerpt ) {
					$output = $excerpt;
	
		if ( has_excerpt() ) {
				$output = sprintf( '%1$s <p class="read-more-container"><a class="button" href="%2$s">Läs mer</a></p>',
				$excerpt,
				get_permalink()
				);
		}
	
	return $output;
}

[Tom]

Can you make sure your menu item height has a value in Customize > Layout > Primary Navigation?

[Cecilia]

No value!
I reset to default and the background color for current item is now visible.

Thanks! <3

/Cecilia

[Tom]

You’re welcome 🙂

[Author]

Posts