Modify menu highlight css - add border for menu item on hover

Travelify
1

Hi there,

I am a newbie to wordpress and travelify, want to know how to modify the css change when hover and selected a menu item.
Currently it change the background color, I would like to keep the background color unchange and change the color of border-bottom instead.

I am still trying to do the customization with a child theme on my laptop locally, sorry that i cannot provide my site for your reference.

Best,
Alex Liu

2

I tried to add the following to my style.css of my child theme.
But it failed, background color of selected/hover item are still there.
The border-bottom appeared, but causing the nav bar to expand downward, my target is to put the border just stick to the baseline.

#main-nav li:hover, #main-nav ul ul :hover, #main-nav a:focus {
  background-color: transparent;
  background-clip: border-box;
  border-bottom: 10px solid #439f55;
}
3

Struggle on this for a week, without any response here
finally i do it by the following code

#main-nav a {
  padding: 8px 10px 0px 10px;
}
#main-nav li:hover > a,#main-nav ul ul :hover > a,#main-nav a:focus,#main-nav a:active {
  border-bottom: 8px solid #439f55;
  background-color: inherit !important;
  -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
  box-sizing: border-box !important; /* Opera/IE 8+ */
  height: 40px;
}

But… there is a strange border shadow like thing when mouse over the menu item.
Is there anybody here can help…
Are all the people on vacation???

4

Hi Alex,

Extremely sorry for the delay here.

To achieve this could you please try adding the following CSS code in the Custom CSS option of your theme on the below path or in the style.css file of your child theme. Remove the above shared code from the site.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

#main-nav ul.root > li:hover > a,
#main-nav  ul.root > li a:focus,
body #main-nav  ul.root > li.current-menu-ancestor a,
body #main-nav  ul.root > li.current-menu-item a,
#main-nav  ul.root > li a:active {
  border-bottom: 8px solid #439f55;
  background-color: inherit !important;
  -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
  box-sizing: border-box !important; /* Opera/IE 8+ */
  height: 40px;
  box-shadow: none !important;
}

Best Regards,
Movin

5

Hi Movin,

Your css code works well!

And then I got another problem on the sub menus, which become quite strange now.

Width seems too wide, bg color not quite match with menu bar, and a grey line below the green line.

Can you also share how to

  1. change the bg color of sub menus (just want a lighter grey then the menu)
  2. change the border color of the sub menus (just want a lighter green then the menu)
  3. get rid of the grey line in the bottom of sub menu
  4. change the color of border for the current menu item separately
  5. width of the sub menus

Thanks a lot!
Best regards,
Alex

6

Hi Alex,

You can achieve this using the following CSS code respectively.

1. change the bg color of sub menus (just want a lighter grey then the menu)
``` #main-nav ul li ul.sub-menu a { background-color: #F8F8F8; } ```
2. change the border color of the sub menus (just want a lighter green then the menu)
``` #main-nav ul li ul.sub-menu li { border-color: #6AC94B; } ```
3. get rid of the grey line in the bottom of sub menu
I don't get the grey line on my site as shown in the attached screenshot so this may be displaying on your site due to the custom code added.

So to check it could you please share me your site URL?

4. change the color of border for the current menu item separately
#main-nav ul li ul.sub-menu li.current-menu-item,
#main-nav ul li ul.sub-menu li:hover {
  border-color: #359A34;
}
5. width of the sub menus
``` #main-nav ul li ul.sub-menu { width: 200px; } ```

I saw some minor issues in the previously shared code so please use the following code instead.

#main-nav ul.root > li:hover > a,
body #main-nav  ul.root > li.current-menu-ancestor > a,
body #main-nav  ul.root > li.current-menu-item > a,
#main-nav  ul.root > li a:active {
  border-bottom: 8px solid #439f55;
  background-color: inherit !important;
  -webkit-box-sizing: border-box !important; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box !important; /* Firefox, other Gecko */
  box-sizing: border-box !important; /* Opera/IE 8+ */
  height: 40px;
  box-shadow: none !important;
}

Regards,
Movin

7

Hi Movin,

The bg-color of sub menu seems not working on my site, but I am not so sure which part I messed up.

You may check on my site here http://blog.bting-alex.com/

Thanks,
Alex

8

Hi Alex,

I visited your site http://blog.bting-alex.com/ and found the bg color is not working on your site as it is conflicting with other CSS on your site.

To resolve the conflict issue and change the bg color, try using the following CSS code instead of above shared code.

#main-nav ul li ul.sub-menu a {
  background-color: #8F8F8F !important;
}

Regards,
Movin

9

Hi Movin,

It works, how about the extra grey line at the bottom?

Thanks
Alex

10

Hi Alex,

You can change that grey line to the green by using the following CSS code.

#main-nav ul li ul.sub-menu {
  border-color: #439f55;
}

Cheers,
Movin