menu text colour, page title display

Hi there,

Please try adding the CSS below to the customizer in Appearance > Customize > Additional CSS:

/* Change font-family for the main menu */
.main-navigation {
    font-family: "courier";
}

/* Change main menu font colour on hover. Change current menu item color */
.main-navigation li:hover > a,
.current_page_item a,
.current-menu-item a {
    color: #00ff00;
}

If the CSS doesn’t work, please post a link to a live site so we can troubleshoot it.

Would like to have the page title not appear on the page.

Are you trying to hide a title on one specific page or all pages?

Thanks for chiming in, Gary!

@evecaro – I just wanted to mention that if you’re trying to use a special font that people are not likely to have installed on their computer or mobile device – i.e. not system fonts like Courier, Verdana, or Times – then you’ll need to make sure your site pulls in that font somehow (it’s called “enqueuing” the font) in addition to defining it with CSS. A Google Font plugin is one way to do that.

https://www.ads-software.com/plugins/search/google+fonts/

Some of these plugins also let you also assign different elements to your selected font within the plugin’s settings area, without needing to write any CSS.

Let us know how it goes.

That worked! Thank you so much! I had a Google Fonts plug-in already installed and so I can make the menu text any Google Font now so that is brilliant.

The default colour for text on the menu (normal display not hover) is grey, where do I change this? I just want the menu to be black text with a specific colour hover (got the hover colour sorted now of course!).

Yes I would like to remove the page title on every page.

Thanks ??

Apologies, I just spotted another issue with hover colour. I have a portfolio site and the homepage is a grid of thumbnails, my projects, with a title underneath. When I rollover this text again its the orange colour. Would there be a way of just changing this default accent colour throughout? Or what would be a good solution?

Hi @evecaro!

The default colour for text on the menu (normal display not hover) is grey, where do I change this? I just want the menu to be black text with a specific colour hover (got the hover colour sorted now of course!).

You can add the following to your site’s custom CSS to change the default colour of the links in the menu:

.main-navigation a {
    color: #663399;
}

As before, change the value of #663399 to any hex colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of hex colour codes and their corresponding values. Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

I have a portfolio site and the homepage is a grid of thumbnails, my projects, with a title underneath. When I rollover this text again its the orange colour. Would there be a way of just changing this default accent colour throughout? Or what would be a good solution?

There isn’t a built-in way to change the accent colour throughout the theme, custom CSS is the best bet here. ?? The following is currently setting the orange colour (#f68060) on your portfolio pages:

.page-template-portfolio-page-php .jetpack-portfolio:hover a, .project-navigation-wrapper .jetpack-portfolio:hover a, .page-template-portfolio-template-php .jetpack-portfolio:hover a, body[class*=jetpack-portfolio].archive .jetpack-portfolio:hover a {
    color: #f68060;
}

You can add the above to your custom CSS and change the hex colour code to your liking.

If there’s anything else we can help out with, don’t hesitate to reply back.

Thank You, this is currently what I have in my custom css section:

/* Change font-family for the main menu */
.main-navigation {
font-family: “montserrat”;
font-weight: 300;
font-style: normal;
font-size: 90%;
}
/* Change main menu font colour on hover. Change current menu item color */
.main-navigation li:hover > a,
.current_page_item a,
.current-menu-item a {
color: #4ebacf;
}
.page-template-portfolio-page-php .jetpack-portfolio:hover a, .project-navigation-wrapper .jetpack-portfolio:hover a, .page-template-portfolio-template-php .jetpack-portfolio:hover a, body[class*=jetpack-portfolio].archive .jetpack-portfolio:hover a {
? ? color: #f68060;
}

The hover colour and font choice for the menu are working but when I tried to enter the new code regarding the normal display colour of the menu text this did not work.

Also, the last part about changing the hover colour on the portfolio grid on homepage is not, these titles are still orange when I rollover.

Also, I would like to remove the page title display on all pages?

Thanks

The hover colour and font choice for the menu are working but when I tried to enter the new code regarding the normal display colour of the menu text this did not work.

I tested the code I provided on my own installation of Sketch and it worked to change the colour of menu links, so I’m not sure why it’s not working on your installation.

Could you possibly share a link to your site? I could then dig into the CSS there.

Also, the last part about changing the hover colour on the portfolio grid on homepage is not, these titles are still orange when I rollover.

Did you change the hex colour code from #f68060 to the colour of your choice in your CSS? Again, this is working well on my own installation of Sketch so I’d need to dig into your site’s code to understand why it’s not working there.

Also, I would like to remove the page title display on all pages?

You could use the following CSS to remove the page title from all pages:

body:not(.home) .entry-title {
    display: none;
}

Let me know if that achieves what you’re after!

Hi, Sure I’ll deactivate the maintenance mode, its without any branding yet just getting a structure I am happy with and making sure I can tweak fonts and colours.

Currently this is what is in my custom css section:

/* Change font-family for the main menu */
.main-navigation {
font-family: “montserrat”;
font-weight: 300;
font-style: normal;
font-size: 90%;
}
/* Change main menu font colour on hover. Change current menu item color */
.main-navigation li:hover > a,
.current_page_item a,
.current-menu-item a {
color: #4ebacf;
}
.page-template-portfolio-page-php .jetpack-portfolio:hover a, .project-navigation-wrapper .jetpack-portfolio:hover a, .page-template-portfolio-template-php .jetpack-portfolio:hover a, body[class*=jetpack-portfolio].archive .jetpack-portfolio:hover a {
? ? color: #4ebacf;
}
body:not(.home) .entry-title {
display: none;
}

1. Removing page title from every page: Thanks this worked great for all except the homepage which still has ‘Work’ up the top, but this is my projects thumbnail display so perhaps this requires a different solution?
2. Menu Text: All working okay I can change type style and hover colour, except the normal display colour of the menu text (not hover) is grey and I would like it black.
3. Portfolio Grid on Homepage: Hover colour of these titles is still orange.
4. Also, I would love to be able to change the type style on the contact form on the contact page as I have Montserrat as my sans serif throughout.

Thank you so much for all the help!

Thank you for deactivating maintenance mode! That helps a lot.

1. Removing page title from every page: Thanks this worked great for all except the homepage which still has ‘Work’ up the top, but this is my projects thumbnail display so perhaps this requires a different solution?

You’re right that the homepage requires a slightly different solution. Try the following to hide the title there:

.page-title {
    display: none;
}

2. Menu Text: All working okay I can change type style and hover colour, except the normal display colour of the menu text (not hover) is grey and I would like it black.

I’m not currently seeing the following snippet in your site’s custom CSS. Could you add this and then save your changes?

.main-navigation a {
    color: #000;
}

3. Portfolio Grid on Homepage: Hover colour of these titles is still orange.

The following CSS is working in my browser’s inspector with your site:

.page-template-portfolio-page-php .jetpack-portfolio:hover a, .project-navigation-wrapper .jetpack-portfolio:hover a, .page-template-portfolio-template-php .jetpack-portfolio:hover a, body[class*="jetpack-portfolio"].archive .jetpack-portfolio:hover a {
        color: #4ebacf;
}

I’m not seeing the above CSS in your site’s file when inspecting its code, despite the fact you mentioned it in your last reply.

How did you add the custom CSS to your site? Was it via a plugin?

4. Also, I would love to be able to change the type style on the contact form on the contact page as I have Montserrat as my sans serif throughout.

You could target the contact form using the following custom CSS:

#contact-form-2 {
    font-family: "montserrat";
}

Before you do that, I recommend deactivating all of your existing plugins one by one to see if any are preventing your existing custom CSS from loading correctly.

Amazing! Thank you!

One other thing I may as well address now, you see on ‘About’ and ‘Contact’ page there is the grey line underneath the header area, and on the home page this sites below the intro text. Is there any way to have this sit consistently, to sit directly below the header area as it does on About and Contact pages?

You can use the following custom CSS to add that line beneath the header area on your home page:

.page-template-portfolio-page-php .site-header {
    border-bottom: 3px solid #eeeeee;
}

If you’d then link to remove the second grey line below the home page’s intro text, use the following:

.page-template-portfolio-page-php .page-content {
    border-bottom: none;
}

Hope that’s helpful!

Ok perfect, that worked! I will deactivate the site now so thank you for all this very valuable help! ??