Mega menu item bottom border

Support
#1

Hi! I’m having trouble adding 2 things to my mega menu.

  1. I would like to add a bottom border to an item on hover and add a background color to the dropdown list.

The problem is that I can not target the right classes or id’s. I’ve been stressing with this for a while and my client needs it done as soon as possible.

Also I want the border bottom to be inline with the element to the left and not how it if you just add a border-bottom (its below the line, not inline with the element next to it).

This is how I need it to work.

I cant make changes to the menu in terms of height and things that would make it look different.

Hope you can be of assistance.
Regards,

Luka

#2

Hi There,

To achieve that, please add this custom CSS under Theme Options > CSS:

li#mega-menu-item-5527 a {
    margin-left: 0 !important;
    padding-left: 30px !important;
}
li#mega-menu-item-5527 a:hover {
    color: #f78f1e !important;
    border-bottom: 1px solid #f78f1e !important;
}

body #mega-menu-wrap-primary #mega-menu-primary #mega-menu-item-5527 ul.mega-sub-menu {
    background-color: #adadad6b !important;
    width: 112.25px !important;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Thank you for your reply! But, what I needed was for the border to be aligned with the menu item left of it.
Now the border is lower as you can see on this picture.

I need the border to be aligned with the bottom of the button next to it like in this picture

I believe this should be done with box-shadow. But I wasn’t able to using before, after.

#4

Hi There,

In this case, please update the previous CSS to this:

li#mega-menu-item-5527 a {
    margin-left: 0 !important;
    padding-left: 30px !important;
    line-height: 40px !important;
    height: 40px !important;
}
li#mega-menu-item-5527 a:hover {
    color: #f78f1e !important;
    border-bottom: 1px solid #f78f1e !important;
}

body #mega-menu-wrap-primary #mega-menu-primary #mega-menu-item-5527 ul.mega-sub-menu {
    background-color: #adadad6b !important;
    width: 112.25px !important;
}

Hope it helps :slight_smile:

#5

Thank you! This worked! But I have one more question as my client is requesting it.

I would need the bottom border line to be visible on the main nav element (ang) even when you hover over dropdown element it would still stay with the top one. The other dropdown element should not have border bottom when hovered over.

I have tried a couple of jquery statements but none did the trick.
Hopefully you are able to assist me with this.

Enes

#6

Hey Enes,

You mean to show the border bottom all the times? If yes then you can add the following code as well in your custom CSS:

li#mega-menu-item-5527 > a {
    border-bottom: 1px solid #f78f1e !important;
}

If you want to show the border bottom when hovering over it’s dropdown menu only then you can add the following script in the Theme Options > JS:

jQuery(document).ready(function($){
	$('li#mega-menu-item-5527 ul.mega-sub-menu li.mega-menu-item a.mega-menu-link').hover(function() {
		$("li#mega-menu-item-5527 > a").css('border-bottom', '1px solid #f78f1e');
		
	}, function(){
		$("li#mega-menu-item-5527 > a").css('border-bottom', 'none');
	});
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#8

the code works! Thank you so much. You have been of much help :slight_smile:

#9

You’re welcome :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.