Twelve Twelve with Colorful Delight – Problem with custom menu

Resolved Randall2961
(@randall2961)

9 years, 5 months ago
When I activate a custom menu in Appearance > Menus, the background color in the top menu bar goes missing. You can’t see the menu text because it is white on white, but it correctly turns black when you hover on it, so I think the background color is the only thing that is missing. I assume that Colorful Delight was created without regard to custom menus, so it seems likely that I need to add some additional customization code to my child style.css file. I just can’t work out exactly what to add. The custom menu is called “Menu 1” and the navigation source code is as follows (I have removed the URL):

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<button class=”menu-toggle”>Menu</button>
Skip to content
<div class=”menu-menu-1-container”><ul id=”menu-menu-1″ class=”nav-menu”><li id=”menu-item-90″ class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-82 current_page_item menu-item-90″>Post Map
</div> </nav><!– #site-navigation –>

If I disable the custom menu, the default menu displays all my Pages (including Home, which I don’t want and is the reason I am trying to set up a custom menu) and the background color returns. The source code is then as follows (I have removed the URLs):

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<button class=”menu-toggle”>Menu</button>
Skip to content
<div class=”nav-menu”>
</div>
</nav><!– #site-navigation –>

I would really appreciate any advice regarding how to customize my child style.css file so that my custom menus have the right background color.

Thanks and kind regards
Randall

Viewing 10 replies - 1 through 10 (of 10 total)

Thread Starter Randall2961
(@randall2961)

9 years, 5 months ago

OK, I seem to have found a solution, although there may be better ones. I added the following in my child theme style.css file:

.main-navigation div.menu-menu-1-container > ul {
background-color: #xxx;
text-align: center;
}

So presumably in the first line you need to write:

.main-navigation div.menu-[name of custom menu, with any spaces replaced with hyphens]-container > ul {

Theme Author Shawberry Themes
(@busymomibee)

9 years, 5 months ago

Hello Randall! I am glad to see you were able to fix the problem with the menu. I would have recommended the second option that you chose. I had that question posed by others, so glad that you listed it here in the forum. Thank you:)

Thread Starter Randall2961
(@randall2961)

9 years, 5 months ago

Hi BusyMomiBee

Thanks for that and thanks for your Colorful Delight child theme, which is nice and clean and simple and has been fairly easy to modify to suit my requirements.

Actually, there is one more thing you may be able to help me with. I’m trying to reduce the amount of white space at the very top of the page (ie above the title, image and nav bar, but below the colored tile background). I can’t find the margin setting for it in either of the style.css files, so I’m hoping you might be able to direct me to it.

Thanks and kind regards
Randall

Theme Author Shawberry Themes
(@busymomibee)

9 years, 5 months ago

Hello Randall! No problem…I am glad you like the theme:)

Add this code to the style.css file and this should solve that problem:

.site-header {
margin-top: -30px;
}

You can then manipulate the pixels (px’s) to adjust to your liking.

Thank you,

Shawna – Busy Momi Bee

Thread Starter Randall2961
(@randall2961)

9 years, 5 months ago

Thanks very much Shawna!

I never thought to go negative, so I’ve learned something new.

The theme margin looked fine on a PC, but I thought it looked a bit big on a smart phone, so I settled on -20px and I think it now looks great on both.

Thanks again and kind regards
Randall

Jewlez11
(@jewlez11)

9 years, 4 months ago

Is there any other ways to fix the Menu problem? I am not a “code” person, new to all this and have worked so hard on this website I hate to leave this theme because of the menu bar.

Theme Author Shawberry Themes
(@busymomibee)

9 years, 4 months ago

Hello Jewelz11!

Since, this is a free theme there is minimal customization options.

As listed above you can change this code in your style sheet:

.main-navigation div.nav-menu > ul {
background-color: #50BAE2;
text-align: center;
}

You would then replace the color code. Assuming it is just the blue background color you are trying to change.

If you still need assistance, send me an e-mail (with link to your site) to: shawna@busymomibeeblogdesigns.com and I would be happy to help:)

Jewlez11
(@jewlez11)

9 years, 4 months ago

Thank you so much. I am new to all of this so I will be emailing.

MamaAshlee
(@mamaashlee)

8 years, 11 months ago

Thanks so much for this. I’ve been struggling with this issue forever. Now can someone please help me with how to fix the same issue on mobile devices. The code fixed the issue on the computer but on my phone the menu is still white on white and you can’t see it. Thanks!

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

8 years, 11 months ago

If you need help with the Colorful Delight theme then create a thread here: https://wordpress.org/support/theme/colorful-delight

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Twelve Twelve with Colorful Delight – Problem with custom menu’ is closed to new replies.

Tags