Remove box shadow from dropdown navigation background

Support
#1

Hi,

I’m hoping there is a way to remove the dropdown box shadow of my dropdown navigation background. See screenshot. This is a dropdown content element with shortcode inside, incase that helps.

Thank you!

#2

Also, how do you create a full screen effect for the drop down? I could also use the content area modal element. I’d like this dropdown to be full screen width, I’d also like to do the same thing with the mobile version of this element.

Thank you!

#3

Hello Erin,

I have logged in and I wasn’t able to find which page is showing the dropdown menu.

I also checked your headers and I haven’t found which header is it. Please point us to the correct page or header so that we can check your settings.

Thanks.

#4

Hello, it is the cafe page header. Thank you!

#5

I used the modal content element in order to remove the shadow, just now I need the effect to be more like a dropdown. Any suggestions?

#6

Hello Erin,

It is best that you use Content Area Dropdown. Please put it back so that we can apply a custom css to remove the shadow.

.x-mod-container .x-dropdown{
    box-shadow: none;
}

And to make the dropdown fullwidth, simply adjust the “Content Max Width” to 100%.

Hope this helps.

#7

Hi,

Ok, I switched it back to the content area dropdown element, on the cafe page (header). I inserted the CSS you provided, and it works perfectly! Thank you! However, the image you sent for the max content width setting is for the content area modal. This setting does not exist on the dropdown which is why I was using the modal. The content is currently squished in the dropdown. How do I get it to be full width? Thank you for your help!

Erin

#8

Also, is there a way to make the dropdown activate on hover, like a navigation dropdown? Thank you!

#9

Hey Erin,

We’re sorry for the wrong information. Please use the Content Area Modal instead as it has both the options you need.

In the next version of Pro, the Dropdown of the Content Area Dropdown will have the Box Shadow options.

If you wish to continue using the Content Area Dropdown and want to extend the width of the dropdown based on the width of the viewport, you can add this code in the Element’s CSS. You might as well modify the position of the dropdown. Just play with the values below.

$el .x-dropdown {
  width:80vw;
  right:-100px;
}

Please just note that we do not support modifying the elements. The code we provide is only to help you get started. If you need more, you need to learn CSS or hire a third-party developer.

Regarding the dropdown activation, regretfully, no. It can only be activated on click. You will need to hire a developer to override this behavior.

I just like to share a tip because I see you’re trying to create a mega menu. Just know that you can use also Ubermenu for that. For more details about Ubermenu, please read https://theme.co/apex/forum/t/extension-ubermenu/75

Hope that helps.

#10

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