Altering mobile menu visuals when clicked


#1

Hey there

My home page doesn’t work well with how the main menu is shown on mobile when clicked (drop-down). Is it possible to alter it or completely disable it only on the home page?

Regarding altering:

E.g. make the menu appear when clicked either to the right or left overlaying all the other content or even taking over the full screen.

If not, is it possible to make the drop-down menu appear larger on the mobile screen.

Thanks!


#2

Hello,

I would be glad to help you, but can you please provide a link to your website and some explanatory screenshots?

Kind Regards, Roman.


#3

Hey Roman,

Thanks for getting back to me.

The problem is that the drop-down menu is being cut off by page content and is not clickable.

Here is a screenshot.

And here is a link as well to the published page which is intended to be the home page at some point.

https://strengthery.com/elementor-5226

I am using a page builder called Elementor.


#4

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#main-navigation > .sf-menu > ul {
    z-index: 9;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#5

Thanks Roman!

I did add the code but afraid nothing happened. Can’t see any difference. The drop-down menu is still unclickable.

I made sure to delete site cache.

br
Marcus


#6

Hello Marcus,

You added that code within comment tags:

			/*
You can add your own CSS here.
#main-navigation > .sf-menu > ul {z-index: 9;}
Click the help icon above to learn more.
*/

Please add it below that comment, like this:

/*
You can add your own CSS here.
Click the help icon above to learn more.
*/

#main-navigation > .sf-menu > ul {
    z-index: 9;
}

Kind Regards, Roman.


#7

THANKS!

Works flawlessly after I moved the code into the proper place haha :slight_smile:


#8

Great! You are welcome :slight_smile:

Kind Regards, Roman.


#9