How to change main menu selected background color (tab color) and alignment

[AgamaTom]

I am using Agama Pro Child theme dark skin. How do I change the background color of the selected (current) main menu item (it is currently a plain black rectangle)? (Currently working on the full-size screen development.)

Less important – Is it possible to center the menu item text on the background tab/block? The text (“Home”) and the underline are currently left justified.

[Zex]

Hello there!

Can you post the link to your site?

Regards

[AgamaTom]

It is currently just on my local machine (Serverpress). If all goes well the completely new version should be available by 4:00 PST. It is our not-for-profit (I volunteer) association:
CreeksideVillageSonoma.com – and the best example is just the home page.

I’m open to any critiques/suggestions.

Thanks for the help, Tom

[AgamaTom]

Sorry, the board is deliberating and I’m waiting for a reply.

[Zex]

Hello Tom!

Sorry for the long delay, we don’t work on weekends, but since this is an emergency case I will try to help you.

If I correctly understand your problem, (that’s why I need a link to your site)

for the first question, to change the background color of the current main menu item, enter the code below, in: Customize->General->Additional CSS

code:

body:not(.header_transparent) .sticky-nav > li.current_page_item, body:not(.header_transparent) .sticky-nav > li.current-menu-item {
    background-color: #000;
}

Change the background color per your needs.

OR insert next code to have the current menu item background color same as an the header background color:

body:not(.header_transparent) .sticky-nav > li.current_page_item, body:not(.header_transparent) .sticky-nav > li.current-menu-item {
    background-color: inherit;
}

For the second question:
To center the menu items add next code in the same place as mentioned above:

.sticky-nav > li {
    padding-left: 27px;
}

https://prnt.sc/iw29qb

If this is not what you meant, please attach some screenshots with a marked issue.

Best Regards

[AgamaTom]

Wonderful support and works perfectly (frustrating moving to production but not your problem). Thanks. Agama has a very helpful community including videos. CreeksideVillageSonoma.com

[Zex]

This reply has been marked as private.

[PYUREcrew]

Hey there,
I think I have the same issue, but the code above doesn’t work for me.
My website is: http://pyure-crew.net
I don’t want that grey background behind the menu tab that I’m in. I don’t want any background colour there, just the coloured underline. How can I do this?

Thank you 🙂

[AgamaTom]

I like your site. It looks like you have most of the css working and corrected the cut and past change from &gt to >. Here is my working application of Zex’s code:
body:not(.header_transparent) .sticky-nav > li.current_page_item, body:not(.header_transparent) .sticky-nav > li.current-menu-item {
background-color: #444;
}
.sticky-nav > li {
padding-left: 20px;
}
Beyond that I don’t have much to add. Maybe that I also liked baby blue (hex is #89cff0) instead of the #444.
Ciao, Tom

[PYUREcrew]

hey Tom, thanks for your reply, but it doesn’t solve my “problem”, as I don’t want any background-colour for the selected tab, just transparent like the unselected tabs.
and even with the code, the background colour does not change at all.

• This reply was modified 5 years, 7 months ago by PYUREcrew.

[Zex]

Hello, PYUREcrew!

This is the right code for you:

.sticky-nav > li.current_page_item,.sticky-nav > li.current-menu-item {
    background-color: inherit;
}

(Place it in Customize->General->Additional CSS)

Regards

[PYUREcrew]

thanks a lot, it works! 🙂

[Author]

Posts