How to change/background of the active in Main Navbar

[pduberry]

Hi, I have been playing around with the CSS for some time now but I still can’t figure out how to change the color of the text or the background to highlight what the active page is in the navbar. Any ideas?

[Catalin]

Hello,

Add this code in your style.css file from your child theme folder:

COPY CODE

.navbar-header, .kleo-main-header .navbar-collapse > ul > li > a:active
{
 color:#XXX;
}

where #XXX is the color code you want to add.

Let me know if this works.

Thank you,
Catalin

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

[pduberry]

No. Sorry but no success there.

[pduberry]

I got to tell you this support is left lacking somewhat. It’s like pulling teeth. Three days later and I’m no further advanced in getting this problem resolved. Not happy.

I also would like to add a placeholder to the search widget in the main sidebar. Can you help with that?

[sharmstr]

try this

COPY CODE

  .header-color .dropdown-menu > .active > a { color: #CA0000 !important; background-color: #000000; } 

Change the colors to suit you. Also, make sure you’re adding it to your child theme.

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

[sharmstr]

Adding linebreaks so it displays on here better.

COPY CODE

.header-color .dropdown-menu > .active > a { 
color: #CA0000 !important; 
background-color: #000000; 
}

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

[pduberry]

I add this code to style.css in Appearance-Editor and it makes no difference whatsoever. Am I missing something? Can you address my additional question that I have asked as well please? (I also would like to add a placeholder to the search widget in the main sidebar. Can you help with that?)

Regards,

Paul.

[sharmstr]

Can you give me a link to your site? The code works fine for me.

For your second question, can you elaborate? I’m not sure what you are asking for.

(note: I’m not a member of support. I’m just a customer like you, but trying to help.)

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

[pduberry]

I do apologise. I thought that you were a member of the Kleo support staff. Thanks for helping me. The link to the site is . Unfortunately, I am unable to get you into the backend as this is just a site that I am working on for a client.
Cheers, Paul.

The other question is regarding the search widget that can be put into the main sidebar on all pages. I would like to be able to add a placeholder so that the word “Search” shows in the search field before anyone types anything into the bar.

[pduberry]

[pduberry]

I can’t insert a link?? The link to the site is http://wishnet.makeawish.net.

[pduberry]

The code you are giving me is very different from that of Catalin. Does this code not relate to the social icons up top?

[sharmstr]

1 – I’m getting a “domain not active” error when clicking on the link. Just to be clear, you’re adding the code to kleo-child/style.css AND you have the Kleo Child theme active, right?

2 – Copy /kelo/searchform.php to /kelo-child/searchform.php then add placeholder=”Search” to line 4

COPY CODE

<input name="s" id="s" type="text" class="form-control input-sm" placeholder="Search" value="<?php if (isset($_GET) && isset($_GET['s'])) echo esc_attr($_GET['s']);?>">

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

[pduberry]

Oops. I’m so stupid. Sorry but that’s the wrong TLD. It’s http://wishnet.makeawish.ie. Also, you will need the username dsa and password dsa123. Hope you can get in now 🙂

[pduberry]

Just to be clear, you’re
adding the code to kleo-child/style.css AND you
have the Kleo Child theme active, right?

100% correct!

[sharmstr]

Okay, lets back up and make sure I’m understanding what you want. Your original question was “how to change the color of the text or the background to highlight what the active page is in the navbar.”.

My understanding is, for example, when you are on the members page, the “Members” menu item under “Community” will be styled differently than the default. Actually, if that’s the case, you can change that in the Theme Options-> Styling Options -> Header -> Alternate background color (I dont see an option for alternate text color, though.)

If that’s not what you want, can you explain it to me?

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

[pduberry]

I didn’t know what alternate background color meant. However, even when I choose to set an alternate background color it makes no difference. There must be some settings somewhere overriding all this. If I could even set just the alternate background color I would be happy. On the second issue, I am unable to get FTP access to the server to copy that PHP file onto the child theme and edit it. I’ll try later. I don’t know how I’m going to resolve this. Thanks anyway.

[pduberry]

Actually, that did work after I read your last email carefully. The member link changed below the Community main link. But, …I want to change the main link. Now we are getting somewhere.

[sharmstr]

Ok. Now I get it. Try .current-menu-parent > a. Though my guess is that you’re not going to be happy with changing the background color since the menu item is as tall as the menu.

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

[sharmstr]

Forgot to mention, you can always change /kelo/searchform.php using wp admin editor just to make sure it works and its what you want. Then, once you get ftp access, you can copy it over to kelo-child.

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

[pduberry]

Here’s the code I have put in style.css right at the bottom:

COPY CODE

.current-menu-parent > a {
background-color: #848484;
}

It doesn’t make any difference. I am beginning to wonder about this style.css as nothing I put in there appears to work. This is using Appearance-Editor right? Can you please further explain how I might change /kleo/searchform.php using wp admin editor?

[sharmstr]

I just looked at your style.css and its returning “>” instead of “>”. This is what it looks like.

COPY CODE

.current-menu-parent > a {
background-color: #848484 !important;
}

But, in trying to figure that out, I noticed that not all main menu items use the current-menu-parent style so we need to add a another one to the css.

COPY CODE

.current-menu-parent > a, .current-menu-item > a {
background-color: #848484;
}

You can use the editor to add the placeholder by selecting “Kleo” in the “Select theme to edit” dropdown. Then click on Search Form. Though I see the placeholder is already in your widget so maybe you’ve figured that out.

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

Attachments:

You must be logged in to view attached files.

[sharmstr]

Arggg. The forum returned the greater than sign. Look at the attached image to see the issue.

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

Attachments:

You must be logged in to view attached files.

[pduberry]

I’m confused. You say: “its returning “>” instead of “>””. Are they not the same? I have put that extra code in but still not working. And yes, I figured out how to edit the searchform.php using WP-ADMIN Editor. Thanks.

[pduberry]

Right, so do I need to put in > or the > symbol?

[pduberry]

Same problem as you. So do I need to put the code beginning with & or the greater than symbol into style.css?

[sharmstr]

Its confusing because this forum parsed out the ‘& g t ;” code (which is the code for the greater than symbol.

Anyhow, looks like your css is correct now. What I dont understand is why its not parsing it. I can see kleo-child/style.css is being called in <head> but its not using that rule. Can you try moving the code up to the very top of your style.css file? Just below “Please add your custom styles below”.

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

[pduberry]

Either way, you are probably right. Even if I did get it working, having the background that tall is a non-starter. I would just like to have the text in the link a different color. This would look better.

[pduberry]

Will do.

[pduberry]

Yes. (Hooray) That worked but back to your comment about the fact that I wouldn’t like it…. 🙂

[pduberry]

How about adjusting the height of that navbar?

[sharmstr]

Since it worked, that’s probably an indication that you have a coding error further down in your css rules.

Yeah, it doesn’t look good at all. If you want to change the text color, you can do that by changing background-color to color. Then change the color code too.

Also, I cant figure out a way to get it to work with mega-menu items, but it doesnt look like you’re using them anyways.

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

[sharmstr]

“How about adjusting the height of that navbar?” You could by screwing around with the .navbar-collapse css rule, but I’m not helping with that. 🙂

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

[pduberry]

Yes. Don’t want to push my luck. Anyway, you are the man/woman, not sure. Thanks a million for your help. You deserve a medal.

[sharmstr]

Woman. thank you. 🙂

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

[pduberry]

One thing I meant to ask you was this. Are you using Firebug to identify the various classes that one can select for targeting?

[Catalin]

Hello pduberry,

Please explain what you want to achieve with the navbar height.
And also, for identifying the CSS selector, Firebug is the tool to do this.

Thank you,
Catalin

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

[pduberry]

This reply has been set as private.

[Abe]

from no-reply@seventhqueen.com:

I add this code to style.css in Appearance-Editor and it makes no difference whatsoever. Am I missing something? Also, how is this code targeting the active link? Just curious. Can you address my additional question that I have asked as well please?

Regards,

Paul.

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[pduberry]

Thanks for sending me back my original message. Helpful.

[Author]

Posts