Navigation Menu Color and Footer Text

The new website isn’t up yet, but for reference, this is the old website: https://funkydreamerstorytime.com/

The color I am looking to change is the yellow/orange color in the navigation bar for the down arrows, the underline bar, and the text when mouse is hovering over.

And in this version it has a small WordPress Logo image in the footer which I much prefer to “Powered by WordPress Theme: Shoreditch”

Hi @kaylaz!

I was using Shoreditch on WordPress.com and they had several color palettes to choose from, but now on this version there is no option for changing any colors except the background color.

Those color palettes are a WordPress.com feature, not something that’s built into the the theme itself ?? You can use the Additional CSS panel to add CSS to change individual colors – or if you are able to look in your WordPress.com account and tell me which palette you wanted, I can grab a copy of that CSS for you.

Also, this version has large text at the bottom that says “Powered by WordPress Theme: Shoreditch. How can I remove this text? I have tried CSS but it didn’t work, plus I have heard that this is frowned upon by SEO.

This can be hidden with CSS. SEO implications are something that lots of people have different opinions on, but if it were me, and this were my site I’d just use the CSS:

.site-info {
    display: none;
}

Adding that under Additional CSS in your Customizer should do the trick.

I also tried looking for it in the PHP and did find the text there, but I have heard that this can be dangerous and mess with your website and it is only temporary as it goes away when you update the theme.

If you want to remove it manually, you’ll want to set up a child theme. Then you could make a copy of the parent theme’s footer.php file into your child theme folder, and remove the entire site-footer element.

I’m not able to see the site you’ve linked to – but if you can point out the item you want to change the color on using the Shoreditch demo site here, I can point you in the right direction (unless you’d rather just grab a copy of the color palette CSS like I mentioned above) ??

Hello,

Thank you for the CSS code, it worked!

As for not being able to view the website, it is bouncing back and forth between showing the old website, a coming soon page, and a security block. The security block is a Google Chrome issue, it should work on other browsers.

Here is a screenshot of the 3 times the color appears in the navigation bar. It might need to be viewed on a non-Chrome browser as it is hosted on our WordPress page.

On the demo site, it is the bright blue color they have in the navigation bar as the down arrow, underline, and hover color, as well as the menu button, which is another item I need the color changed on. I will need to play with the specific color, but #f2ba00 is a good starting color. I just don’t know the CSS code to target the navigation/menu items.

Thank you again for your help!

Got it – thanks for the screenshot and detailed description.

This should do the trick:

/* Navigation link underline */
.main-navigation .primary-menu .current_page_item>a,
.main-navigation .primary-menu .current-menu-item>a,
.main-navigation .primary-menu .current_page_ancestor>a {
    border-color: #f2ba00;
}

/* Navigation hover color */
/* Navigation child menu indicator color */
.main-navigation a:focus, .main-navigation a:hover,
.main-navigation .menu-item-has-children>a:after {
    color: #f2ba00;
}

/* Button color (including mobile menu) */
button {
    background-color: #f2ba00;
}

Let me know how it looks!

Thank you so much! The code worked beautifully, especially the labeling!

My pleasure!

Hello, I had seen in the code that it included the mobile version, however, today when I went to the website on my phone (Android/Chrome) it was showing blue.

Screenshot: https://funkydreamerstorytime.com/wp-content/uploads/2017/03/mobile-view.png

Any ideas on why it is not showing on mobile or any code that could be added?

That’s the Jetpack Plugin’s mobile theme. Shoreditch is a responsive theme, so you can safely turn that off.

Head to Jetpack > Settings. Under Appearance, scroll down and turn off the Mobile Theme module.

Then Shoreditch will display (responsively) on all devices!

Thank you! There are so many little things in this process. I really appreciate you all taking your time to share your hard-“learned” knowledge!

Always happy to help. Ha. hard-learned. I like that ??

Hi Chad @shireling
I’ve also had similar issues to Kayla with shoreditch and used your code above

/* Navigation link underline */
.main-navigation .primary-menu .current_page_item>a,
.main-navigation .primary-menu .current-menu-item>a,
.main-navigation .primary-menu .current_page_ancestor>a {
border-color: #f2ba00;
}

/* Navigation hover color */
/* Navigation child menu indicator color */
.main-navigation a:focus, .main-navigation a:hover,
.main-navigation .menu-item-has-children>a:after {
color: #f2ba00;
}

/* Button color (including mobile menu) */
button {
background-color: #f2ba00;
}

Your code changed the blue menu hover color but I still have blue buttons in a contact form, search box and need a bit more css to change them. I’ve used the Child theme configurator plugin to create my child theme. I used the color #769e78 for now.

I’m about to migrate the site but it’s currently at
https://176.32.230.51/heritagefound.com/

Hope you can help

• This reply was modified 7 years, 12 months ago by Learnlite.

Hi @learnlite!

No problem ??

/* Search button color */
.search-submit:before {
    background: #769e78;
}

/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: #769e78;
}

That should do the trick!

Hi Chad (@shireling)

That has fixed some of the blue links (successfully changed to green) but there are others within the site. How can I find the main css file in the shoreditch parent theme so I can just search for all instances of blue and replace them (in the child theme). for example there is still a blue button in the search widget and some button links in the text.

I looked in the WP files in a back up I have and there seemed to be lots of different css files. So I was bit confused on where to look!

thanks for your help.

site is at https://www.heritagefound.com

The CSS is in the parent theme’s style.css file

Just remember not to make changes in there, because they’ll get overwritten.

You can also use your browser’s inspector to locate the elements you need to write new styles for.

You could try making the style I sent previously for the search button more specific:

.search-form .search-submit:before {
    background: #769e78;
}