[DFXParticipant]

Hello,

I would like to change the nav bar buttons so that the button being hovered over, or selected completely change to a red color (and when they are selected they stay that color until another button/page is selected)

How can I do this?

Thanks

[DFXParticipant]

This reply has been marked as private.

[DFXParticipant]

-also how do I get the buttons to slightly stick out at the top of the nav bar when they are hovered over or selected? (like the ones shown in the link I showed in the privet message)

Thanks

[LelyModerator]

Hi There,

Thank you for the URL and sample site.

Please add this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-navbar {
     box-shadow: none;
    border-bottom: none;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    background-color: #B8030B;
    border-top: 5px solid #B8030B;
    margin-top: -5px;
}

Hope this helps.

[DFXParticipant]

Thanks.

How may I get it so that the bottom of the (now) Gold buttons are level with the bottom of the navbar?

Also I wanted to make the buttons a bit wider, without changing the size of the text/spacing

[JoaoModerator]

Hi There,

Based on your information I am not sure what you are trying to achieve can you please provide us more details and specify which buttons you mean.

Thanks

Joao

[DFXParticipant]

Iv attached a pic that explains it better.

-its for my fxpainters.com page

Thanks

[John EzraMember]

Hi there,

Thanks for updating the thread! Upon checking your site, it seems you have already solved this issue and with another color than in your screenshot. Are you still needing any assistance regarding this issue? Thanks!

[DFXParticipant]

Hi,

I wanted the page to look like the image on the right hand side of the pic I attached to this message.

I tried getting it to work but have not yet succeeded

Thanks

[ChristopherModerator]

Hi there,

Please add this code :

@media (min-width:979px){
.x-navbar {
    height: 42px;
}
}

Hope it helps.

[DFXParticipant]

Thanks, that made the navbar right. Just need to know how to make the buttons wider if possible?

[ChristopherModerator]

Hi there,

Please add this :

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 32px;
    padding-right: 32px;
}

Hope it helps.

[DFXParticipant]

Thanks.

Now when I manually resize the webpage size (by clicking & dragging the side of the web browser) the “contact” button/tab moves a line down bellow the grey navbar when the page gets smaller to a certain size and you then cant see the “contact” button well because the text used for the buttons are an almost white color which blends into the white page background?

[DFXParticipant]

-Also, is there a way to select the width size of each button individually?

[Rue NelModerator]

Hello There,

Sorry if it didn’t work out. To void further confusion, I would ask you to remove the given css code. Please remove this block:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 32px;
    padding-right: 32px;
}

Once removed, you will see that the menu items are back close to each other again. You can adjust the spacing between menu items by going in the customizer, Appearance > Customize > Header > Link – Alignment and change the “Navbar Top Link Spacing (px)” to at least 35px. Please make sure that it is decent enough so that the “Contact” menu item will not go to the second row.

Hope this make sense. Please let me know how it goes.

[Author]

Posts