Changing color on main header

[tlovvorn]

I have spent two hours looking through the forums trying to figure out this issue that on every other theme I have used is relatively simple and straightforward. At http://www.everyclickenslaves.com, I have set my top bar to red. I would like for the menu items in the top bar to be white (They become white when you mouse over, but I want them white before mouse over.)

Secondly, the main header has a white background, so when the page scrolls, the white text disappears completely. Rather than changing the font color, I would like for the header menu background to be a transparent #333333 if possible. I have seen that effect on your demo page here: http://seventhqueen.com/themes/kleo/portfolio-full-width/

I like the highlight feature when you scroll, but have not been able to figure out how to set which part of the menu to highlight.

 

Please advise.

[sharmstr]

The menu color is set in Theme Options > Styling > Header: Link color and Link Hover color.

You can set the header background color in the same section as above. If you want your main menu background to be semi-transparent, you can try this in your quick css and change ‘2’ to adjust the darkness.

COPY CODE

.kleo-main-header.header-normal {
    background-color: rgba(0,0,0,0.2) !important;
}

The transparency in that demo during page scroll is set up by editing the page you want that to happen on, scroll down theme general settings and enabling transparent main menu. You should only do that on pages where you have an image or slider that will sit under the menu.

You can highlight text in 1 of 2 ways. Either by wrapping the title in em tags

COPY CODE

<em>highlight</em>

or by using the btn-highlight class in the css class field

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[tlovvorn]

Ok all of that I have already been playing with and have not been able to get the changes that I would like to have. So specifically, I currently have a red top bar, which is what I want. I want the menu on that top bar to be #ffffff when there is no hover so it is easier to read.

There is a white bar/header just under the red top bar. I would like for this bar to be black or transparent black so that the white menu will show up on it. I have not been able to find out where to change the background color of this header that is just underneath the top bar.

As you can see from the attached screen shot, the white menu disappears on this white background when you scroll down the page.

Attachments:

You must be logged in to view attached files.

[sharmstr]

Did you add the css I gave you to add transparency to the main menu?

Looks like you may have transparent main menu turned on at the site level (in theme options). Again, you should only have it turn on for pages that need it. Your give page doesnt need it, neither does your home page. At least they are not set up in such a way that would look good with it. (white bar between top bar and main menu).

Give me access and I’ll look at your settings and explain everything that should and shouldnt be set up the way you have it.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[tlovvorn]

This reply has been set as private.

[sharmstr]

– Turned off transparent main menu in theme options

– Added the css I gave you initially.

– You had a coding error in your css and it probably why you were having troubles doing this yourself.

– Set the header color to transparent so you can have separate colors for top bar and menu menu.

– Added css to remove the tint on the top bar font.

– Turned off transparent main menu on home page.

Let me know what I missed or what I didnt get right.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[tlovvorn]

Fantastic! Thank you! Only 1 quick question concerning the header. I like the fact that the header under the top header is now black, but I can’t find where exactly to change it if I want to change it to something else. Is that the background of the entire page showing through or is there a specific place to change that color in the style settings?

Portfolios:
I have only done 1 previous wordpress site that makes use of Portfolios and I was hoping that you had some video tutorials on how they operate and how to best set them up. I am very interested in setting up a site like the Portfolio Full-Width Overlay Demo where the portfolio items create a grid effect. What exactly is the functional difference between a page and a portfolio?

Thanks for all your help!

[sharmstr]

The css for the menu is in theme options > general > quick css.

Portfolios are custom post types. There’s really no difference from WP posts. They are just a way to separate content. If you import the demo data, you can see examples of different portfolio page layouts. You dont have to stick to one layout. The Portfolio Full-Width overlay is a page (not a portfolio page) that uses the portfolio shortcode to display a listing of your portfolios. Its really no different than a page set up to display a listing of the posts on your site.

Here’s the codex on post types. The top of the page explains what they are: https://codex.wordpress.org/Post_Types

Please start new topics for new questions. It really helps when searching topics here.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts