Mobile Menu: increase touch area for dropdown

[amaravati]

Hi,

1. One of the issue we have with the mobile menu is the area of opening up the sub navigation menus. It seems (on an iPad) the mobile navigation sub menu only opens when the RED area is tapped. But we would like the entire BLUE area to activate the dropdown. It is very counter intuitive that it doesn’t work like that, since the non-dropdown menu items (those that directly go somewhere) are activated when any tap is senses. inside the box.

Is it possible the mend this with some CSS?

2. Also where can we adjust at which pixel width does the mobile menu appear/disappear? we would like to adust that. Not sure what the current width is either.

Thanks, as always!

Help?

Home » Amaravati Buddhist Monastery

[nabeel]

Hi @amaravati,

Thank you for reaching out to us. X header is designed with ready to go basic settings so we often receive header related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro. Please consider upgrading to Pro so you can build a custom header yourself without custom coding. In case you upgrade to Pro and you get stuck with the options, we’re here to assist all the way.

You can also checkout https://theme.co/docs/converting-from-x-to-pro and https://theme.co/docs/the-difference-between-x-pro

@amaravati

Is it possible the mend this with some CSS?

However if you want to continue with X, yes this would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. You can add the following code in the Theme Options > CSS to increase the touch area for the dropdown:

.x-sub-toggle {
    width: 100px;
    text-align: right;
}
.x-sub-toggle>span {
    padding-right: 20px;
}

Feel free to adjust the width: 100px; as you need. Don’t forget to clear all caches including your browser’s cache after adding the code.

@amaravati

Also where can we adjust at which pixel width does the mobile menu appear/disappear? we would like to adust that. Not sure what the current width is either.

Currently, there is no option in X to adjust the appearance of mobile menu, you can adjust this in Pro quite easily.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

If you need further customization in the header, please consider upgrading to Pro.

Hope this helps!

[amaravati]

HI!

Thanks for clarifying the Pro’s options. I also understand a bit better why the Pro was established. I am just redoing a website that was made 6 years ago, and I think I am used to asking for CSS! Ha… that was normal in those times.

I will re-consider the Pro option, but I think it might be overkill, but I haven’t really look into it at the time when it was announced.

Thanks again, the support has always been excellenced since 6 years!

N

[jade]

Thank you for the kind words, @amaravati and you’re most welcome!