Coalition Basic Theme Menu Colours « Support Forum | Kriesi.at

Support Forum » Coalition

Coalition Basic Theme Menu Colours

6 posts from 3 voices

Started 11 months ago by ColinHunter
Latest reply from Devin
This topic is closed
This topic is not a support question

Tags:

ColinHunter
Member
Hi,

I'm running my main site using Coalition Theme in One Page Portfolio mode and used the One Page Portfolio Builder to edit the menu colours. I have one background colour when you hover over a menu item and a different background colour for the current selected item.

I also have an external link to my blog which also uses Coalition but in Basic Theme mode. I created a menu that is exactly like the menu on my main site (with the links taking the user back to the main site) but with some additional category links within the blog. But as I am running Basic Theme mode, I don't have the One Portfolio Builder to edit the colours of my menu items. I would like to have exactly the same menu colour schemes in both menus (main site and blog).

Please could someone help me out with this. I've seen another thread with a similar question and it seems that entering a quick CSS in the layout and styling tab of Theme Options is a solution. But the code that was suggested (see below) does not give a different hover colour and current item colour, both are the same.
```
#top .main_menu a:hover, #top .main_menu .current-menu-item > a, .main_menu .current_page_item > a {
    color: #FFFFFF;
}

.main_menu .section-home.current-menu-item a, .section-home .section_bg{
    background-color: #32333D;
}

div .main_menu a{
color:#444;
}

.main_menu a:hover, .main_menu .current-menu-item>a, .main_menu .current_page_item>a{
background-color:#444;
}
```
Also, is it possible to have the small coloured bar which sits inbetween the menu and the content on a Basic Theme page? I suspect this may be a feature only available in One Page Portfolio mode?

My main site - http://www.audioloungesound.com (with menu as I want it)
My blog - http://www.audioloungesound.com/blog (with menu not as I want it)

Thanks in advance for your help...
Posted 11 months ago #
Mya
Hi ColinHunter,

Try this for the hover:
```
.main_menu a:hover {
background-color: #546B0A;
}
```
The current color for the menu item "Blog" is a bit tricky because WordPress isn't applying the class name "current-menu-item" or "current_page_item" so instead you'll have to use this:
```
.main_menu #menu-item-1220 a {
    background-color: #444444;
}
```
Hope this helps!

Regards,
Mya
Posted 11 months ago #
ColinHunter
Member

Hi Mya,

Thanks for your rep^ly. When I added this code, the blog menu item does indeed have the desired background colour. However, the text for this menu item only changes to white when I hover. Otherwise it is grey (#444444). I'm not quite sure why this is happening.

Also, underneath the "Blog" menu item I have three sub-menu items (these are actually blog catagory menu items). Would it be possible to apply the same menu colour background to these too (if selected). At the moment, they have a grey background colour when selected and "Blog" remains green.

Kind regards,
Colin

Posted 11 months ago #
Mya
Hi Colin,

Apologies for the delay in responding.

I forgot to include the div before .main_menu so use this:
```
div .main_menu #menu-item-1220 a {
    background-color: #546B0A;
    color: #FFFFFF;
}
```
As I explained above the WordPress doesn't apply a "current-menu-item" or "current_page_item" so the only way to set an active state is to reference the ID number which also means it will stay that color throughout the rest of the /blog/ website e.g. clicking on a category.

To combat this, may I suggest setting the category "selected" links to a lighter shade of the Blog's background color? That way it ties together.

Here's the code you would use:
```
.main_menu .current-menu-item > a {
    background-color: #546B0A;
    color: #FFFFFF;
}
```
Of course you would change the background-color to whatever color you want to use.

Regards,
Mya
Posted 11 months ago #
ColinHunter
Member

Great stuff. Thanks for the solution Mya!

Posted 11 months ago #
Devin
Moderator

Glad that worked for you :)

Let us know if you have any other issues and we'll do our best to help!

Regards,

Devin

Posted 11 months ago #