[udbhav_tiwariParticipant]

Hey,

I am working on a website ( http://www.mdtpartners.com.cp-in-5.webhostbox.net/wp/ ) and would like to do two things relating to the Navbar Menu:

1.) I would like align all the menu items to the extreme right of the nav bar, so that they are flush against the right hand extreme of the page in a horizontal manner.

2.) I would like to make the entire area around a menu item turn into a particular colour upon hovering/being selected. Currently, just the text in the menu item turns into a custom colour.

For an hint about what I am looking for in both the points above, please look at the following picture: https://imgur.com/W8CIZPL

Please do let me know if there is anything else you need from my end! I have already tried a bunch of suggestions from a lot of other forum posts but nothing seems to work!

Thank you so much,
Udbhav

[JackKeymaster]

Hi there Udbhav,

Thanks for getting in touch!

1: Add the following CSS under Customize > Custom > CSS

ul#menu-primary-menu.x-nav {
    padding-left: 10px;
    margin-right: -400px;
}

This will align the menu far right like in your screenshot you posted. 🙂

2: Add the following CSS under Customize > Custom > CSS

.x-navbar li:hover {
    background-color: #00FF00;
}

Just change the color code to what color you’d like the container of the menu item to be on hover, there’s a great color picker here. http://www.w3schools.com/tags/ref_colorpicker.asp?colorhex=800080

Hope this helps, any issues please don’t hesitate to ask.

Thank you! 🙂

[udbhav_tiwariParticipant]

Thank you for your prompt reply! I had to edit the margin-right value to -200px to make it work properly but everything else worked like a charm, I just have one more small thing related to this that I have elaborated below.

[udbhav_tiwariParticipant]

Hey,

Sorry, just one more thing.

I wanted the selected button (container) on the menu in the Navbar to retain the colour it obtains on Hover, if I choose to open the page by clicking on it. Currently, the container takes on a custom colour when I hover my mouse over it but only the text gets highlighted if I choose to open the page. I would like the container to also take on a custom colour when the page it links to is opened by clicking on it.

A sample of what I am looking for can be found at: https://imgur.com/W8CIZPL My website is the same as above.

Do let me know!

Thank you,
Udbhav

[JadeModerator]

Hey Udbhav,

Please add this CSS in the Customizer:

.x-navbar .desktop .x-nav > li.current-menu-item > a {
    background-color: #62769f;
}

Hope this helps.

[udbhav_tiwariParticipant]

It worked perfectly! Thank you!

[ThaiModerator]

Glad it worked 🙂

If you need anything else, please let us know.

[Leearna CParticipant]

Hi,

I have this same problem and I’ve asked previously on this forum but was told that it is a customisation. But what I really want is exactly the same, all my menu items aligned to the far right. But… the code doesnt seem to work for me.

ul#menu-primary-menu.x-nav {
    padding-left: 10px;
    margin-right: -400px;
}

Can you give me an idea where I’m going wrong. http://www.jenniparsonsdesign.com

Thanks!
L

[Leearna CParticipant]

Hi,

After all my searching I seem to have found the answer… all the custom CSS werent working because I was missing a } in an earlier code.

Thanks.

[Prasant RaiModerator]

Glad you figured it out 🙂 If you need help with anything else, just drop us a line.

[Author]

Posts