Mega Menu Horizontal Alignment Issue + Background

auditbot · June 2020

Hi,

Here is my site www.asaa.xyz/auditbot

Here is the screenshot - https://imgur.com/a/0VBWrIz

Issues:

1. The Mega Menu has to be aligned to the right side of the screen. Please suggest how to do it.

2. When you scroll down (Check image 2) the mega menu moves away from the screen to the left side of the screen. How to correct it?

3. I need to remove the box background which is like horizontal lines in the submenu for each item. That has to be removed and should look blank grey bg.

4. I have removed vertical lines in the menu. So it has been removed in the submenu too. Can I have the vertical line for the Mega menu alone as dividers between the mega menu?

Kindly help.

Thanks.

Pablo · June 2020

Hello,

1,2) You will not be able to change it to be full width or align it easily, because it's limited to the "Top Bar Left" (menu) width, see the screen to understand:

https://prnt.sc/t650ub

To change that, you would have to overwrite a lot of CSS code or even html code.

3,4) Please paste that CSS code into the Theme Options > Custom CSS & JS > CSS

li.menu-item a{
  border-width:0px !important;
}

html body #Top_bar .mfn-megamenu li.menu-item ul{
  background-image:none !important;
}

html body #Top_bar .menu li > ul{
	box-shadow:unset !important;
}

Thanks

auditbot · June 2020

Thank you.

1&2 was working well till yesterday. I did some changes in the options which turned bad like this.

Finally I found that I changed Mega Menu style from vertical lines to Default which caused the issue. Now I changed that again to Vertical Lines and the issue is resolved.

thank you.

auditbot · June 2020

Please check the screenshot here - https://imgur.com/a/aLaegBF

When I scroll down the page, there is a space between the sticky menu and the drop down mega menu. I have marked in red. I need to remove that space.

Please help Pablo.

Pablo · June 2020

I do not see that issue anymore, did you solve it?

Also, which OS and browser do you use?

thanks

auditbot · June 2020

It is still there.

I use Windows 10. I have checked with Chrome & firefox.

Pablo · June 2020

Please paste that CSS code into Theme Options > Custom CSS & JS > CSS


li.mfn-megamenu-parent > ul.sub-menu.mfn-megamenu {
    top: 60px !important;
}

Thanks

auditbot · June 2020

I used the code given by you. The menu is kind of breaking. Please check the images.

http://www.asaa.xyz/auditbot/wp-content/uploads/2020/06/megamenu1.png

When I scroll down the page, it looks like this.

http://www.asaa.xyz/auditbot/wp-content/uploads/2020/06/megamenu2.png

Pablo · June 2020

Can you disable the under construction mode?

I have to get into that page and check it once more.

Thanks

auditbot · June 2020

Hi,

I did not enable under construction mode anytime. Checked again, it is not. Pls check at your end.

Pablo · June 2020

I updated the code above, it should look fine now.

Thanks

auditbot · June 2020

Hi,

I could not see the change. Pls check the images

1. http://www.asaa.xyz/auditbot/wp-content/uploads/2020/06/menu.png

The menu has moved up, when compared to the second image. Bottom is not even. Space between the heading and the menu is large. So I don't see any change.

2. http://www.asaa.xyz/auditbot/wp-content/uploads/2020/06/menu1.png

This menu alignment is fine. Only mega menu is having issue.

Thanks.

Pablo · June 2020

Yes, I know the problem, but you didn't overwrite the old CSS code.

https://prnt.sc/t8yf5e

Please remove the old code, and apply the new one from my previous reply.

thanks

auditbot · June 2020

Sorry about that. Most of them are sorted out.

But, when the page is loaded, the mega menu loads on top of the menu instead of the bottom of the white border. Pls check the image. http://www.asaa.xyz/auditbot/wp-content/uploads/2020/06/Menu-1.png

Where as, when I scroll down the page, menu aligns to the bottom of the sticky menu correctly. it doen't have any issue during scroll./

Pablo · July 2020

Okay, sorry - I forgot to apply the class for sticky menu only.

Please use this code instead of the old one.

#Top_bar.is-sticky li.mfn-megamenu-parent > ul.sub-menu.mfn-megamenu {
    top: 60px !important;
}

Thanks

auditbot · July 2020

Thank you.

auditbot · July 2020

Can you please help me to understand why the menu height looks bigger on all the pages except home? Can we reduce it?

Pablo · July 2020

It's because of your content padding.

You can remove it, while editing the page, you will find the option named "Remove Content Padding" under the muffin builder.

thanks

auditbot · July 2020

Perfect, thank you.

Mega Menu Horizontal Alignment Issue + Background

Comments

This website uses cookies