Goran navigation menu customisation

Sorry, I forgot to include a link to the developmental site:
https://www.kdesignhouse.co.za/clients/keystone/about/

Hi there. ??

It sounds like you’ve already made some customisations using custom CSS?

Just in case you’re not aware, and for others who may come across this thread: You should not edit your theme’s style.css file directly when adding CSS. This is because changes you make there will be lost when it comes time to update your theme.

Instead, Jetpack’s custom CSS module can be used. (Alternatively, you can set up a child theme or activate a standalone CSS plugin.)

I have managed to change the background opacity and the colors of the Goran menu, but cannot figure out how to decrease the area by reducing the padding, or changing the font size.

The following snippet will change the size of the text in your menu:

.main-navigation a {
    font-size: 1.2em;
}

You can increase/decrease the value of font-size to your liking. Increments/decrements of 0.1 are enough to have an effect e.g. 1.3em, 1.4em, 1.5em, etc.

In addition, you can increase/decrease the right-hand space between each menu item by increasing/decreasing the value of margin-right in the following snippet:

@media screen and (min-width: 1020px) {
.main-navigation li {
    margin-right: 32px;
}
}

I would ideally also like to change the rollover/hover state to a different color or at least a different colored underline.

I can see that you’ve already changed the colour of the links on hover with the following:

.main-navigation a:hover {
    color: #77BE44;
}

You can add border-bottom-color: #77BE44; to also change the colour of the underline:

.main-navigation a:hover {
    color: #77BE44;
    border-bottom-color: #77BE44;
}

Hope that’s helpful! You know where to find us if any extra questions come up.

Thank you so much Siobhan – your assistance is much appreciated!

Yes I have been using a custom CSS plugin (through Jetpack). I’m new to WordPress and haven’t quite wrapped my head around how to create a child/grandchild theme yet so I thought the custom CSS was an easier option for me ??

I’ve been through all of this and have one more related question. Based on one of the snippets above, I thought the following would also work to get the ‘active’ page link and underline to remain green, but it doesn’t. Is this even possible?

.main-navigation a:active {
color: #77BE44;
border-bottom-color: #77BE44;
}

Hi there. ??

I’m new to WordPress and haven’t quite wrapped my head around how to create a child/grandchild theme yet so I thought the custom CSS was an easier option for me ??

As Goran is itself a child theme of Edin, I think custom CSS is the best route to go down.

While it is possible to create grandchild themes, they are not officially supported. If you plan on making significant changes to your theme’s underlying structure (beyond CSS customisations) then the best option may be for you to create a child theme of Edin and copy over the parts of Goran that you like.

If you only wish to make some tweaks to the theme’s styling then custom CSS is perfect. ??

Based on one of the snippets above, I thought the following would also work to get the ‘active’ page link and underline to remain green, but it doesn’t. Is this even possible?

Goran targets active page items in the menu with .main-navigation .current_page_item > a and .main-navigation .current-menu-item > a in its CSS.

I was able to find the above CSS in the theme using my browser’s built-in inspector tools. If you’re interested in learning how to use your browser’s inspector tools and digging in a little more with CSS, then we have guidance and video tutorials here:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

To change the colour of the active items, you can use the following:

.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
    color: #77BE44;
}

As the bottom border to your menu items doesn’t display on mobile or tablet devices, we will need to use a media query to target only devices that are over 1020px:

@media screen and (min-width: 1020px) {
.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
    border-bottom-color: #77BE44;
}
}

I, again, found the above media query by using my browser’s built-in inspector tools to see how the theme’s existing CSS.

Let me know if that’s clear or if you have any extra questions.

I would definitely love to learn more about customization and will check out the tutorials, thanks! This is the 2nd WordPress site I’ve worked on (I come from a Dreamweaver background) so it’s all a process of trial and error at the moment. I used the code above to also apply a green ‘current’ text link – very exciting stuff hahaha ?? What I think I battle with the most is working out the names of all the classes but hopefully this will become more intuitive over time.

Thank you again for all your help ??

It’s definitely something that you get the hang off through trial and error. We’re here for you if questions come up along the way, too. ??