Shop Categories

X

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

Home Forums Agama Pro How to change main menu selected background color (tab color) and alignment

Topic Resolution: Resolved
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #8322
    AgamaTom
    Participant

    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.

    #8354
    Zex
    Moderator

    Hello there!

    Can you post the link to your site?

    Regards

    #8517
    AgamaTom
    Participant

    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

    #8519
    AgamaTom
    Participant

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

    #8521
    Zex
    Moderator

    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

    #8526
    AgamaTom
    Participant

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

    #8528
    Zex
    Moderator
    This reply has been marked as private.
    #8552
    PYUREcrew
    Participant

    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 🙂

    #8554
    AgamaTom
    Participant

    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

    #8556
    PYUREcrew
    Participant

    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 4 years, 8 months ago by PYUREcrew.
    #8561
    Zex
    Moderator

    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

    #8567
    PYUREcrew
    Participant

    thanks a lot, it works! 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.