Mobile submenu issues

Hello,

my submenu works really great on desktop, however on mobile devices there are two issues.

For both of them I tried disabling all the plugins and going back from child theme to the original Sparkling theme, it didn’t help.

  1. The submenu opens only when the arrow symbol is pressed but when the text next to the arrow is pressed, it doesn’t. I went to the Sparkling theme demo and you have it differently - when the text next to the button is pressed, the submenu doesn’t open at all and it goes to another page. Is it possible to change this with a CSS code to open the submenu also by pressing the text?

  2. When I click on the arrow in the submenu on mobile, the submenu opens but the text is not visible until i specifically click into the blank space and hit the hidden text, then it becomes visible. I attached screenshots showing this issue.

the website is: https://www.bednartravel.cz/

Thank you so much in advance for help!

Hello there,

I hope you are doing well today.

  1. You need to ensure the the menu item does not have a link assigned to it so that way when it is clicked it does not go to another page.

2.The color on mobile was white, try adding this CSS code:


@media (max-width: 767px){
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
}
}

Best Regards,
Support

Hello,

The second thing worked, the test is displaying itself now. Thank you so much for you reply!

Regarding the first issue: The submenu text does not redirect me to another page, it doesn’t do anything when clicked. When the arrow symbol is clicked, the submenu shows itself but when text is clicked, it does not. I would like to make it work for both, the text and the symbol.

I’m attaching a screenshot to clarify what I would like it to do.

Thank you again.

Hi there

Sorry but this is not a bug, this is how a theme works, how its designed, you can check it on our demo we have exact same behavior, you have to click on the triangle to open submenu

Hello, that’s unfortunate.

Thank you for your help!

Sorry about that :frowning:
let us know if you have any question,

Hi, I’m so sorry for bothering but I have one more request. :frowning:

I am using justify for some texts on my page and I’m happy with how it looks on bigger screens. The mobile version of the theme doesn’t handle with that well as the words sometimes have spaces between them too big. (screenshot attached)

Is there a way for decreasing those spaces?

I found on another forum of another theme that this should help:

@media only screen and (max-width: 767px) {
/*your text styles*/
}

But I’m not sure what to put there instead of “Your text styles”. Whenever I put there Georgia font that I use like this

@media only screen and (max-width: 767px) {
Georgia
}

The CSS editor goes red and says that ‘}’ is an invalid character.

Thank you so much for your help, really appreciate it!

Hello there,

I hope you are doing well today.

You are going to have to use some CSS like this:


@media only screen and (max-width: 767px) {
.entry-content p {
    text-align: center!important;
}
}

Best Regards,
Support

Hello,

thank you for your assistance, it works!

Cool, I will close this case now, Feel free to contact us again if you have other questions Thanks!