Change color menu and footer

Hi @stoent

thank You for using Goshiki.

You can change the footer text in the customizer (Appearance-> Customize) at the Layout-> Footer section. You can also add widget to the Footer bar.

These colors are not editable in the customizer with the free theme, only with the premium add-on.

However You can add custom CSS to free version also at additional section.
You can change the header and bottom footer bg color with this code:

.site-header, .main-navigation, .main-navigation ul ul {
    background-color: #5a6468;
}
.site-info {
    background-color: #5a6468;
}

Change the color code as You want.
I hope it helps! Have a nice day!

Regards,
wpkoithemes

Hello stoent,

Add below css code into your current active child theme’s style.css file or you can add additional css option in theme customizer

.main-navigation .main-nav ul li {
    background-color: #97b0bf;
}
.inside-header.grid-container.grid-parent {
    background-color: #97b0bf;
}
.main-navigation .main-nav ul li a, .menu-toggle
{
	color: #fff;
}
.footer-widgets {
    color: #f4ff0b;
    background-color: #97b0bf;
}

.site-info {
    color: #f4ff0b;
    background-color: #97b0bf;
}

Hope this will helps you.

Thanks.

Thx! Love it!

Now I just need the code so I can change the color for the menu/search button in the mobile mode as well.

2 more color questions.

I want to change the hover color for menu (its dark grey right now).

And

I want to change menu and search color in mobile mode (its green right now, menu its green when u have clicked on it).

Cant find where to change this ??

Hi,

use this CSS for this:

.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a {
    color: #5a6468;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: #5a6468;
}

button.menu-toggle:hover, button.menu-toggle:focus, .main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover, .main-navigation .mobile-bar-items a:focus {
    color: #97bdbf;
}

Hope it helps!

It looks like its dosent works ??

Hi,

as i see, a little bug in Your CSS.
You’ve put the code between “@media (min-width:768px){}” code. In this way, the CSS for the mobile won’t work.

Yes, i deleted a } by mistage.

Thanks!