Shapely sub menu doesn't show in mobile version

Shapely
1

Hi,
I have a problem with the menu on the beautiful Shapely theme (thanks for a great work!!).

The sub menu is not showing up when being on the mobile, could anyone help me to get the dropdown working? Url is: www.nasbyviken.se

Thanks for helping out!

2

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

@media (max-width: 991px){
.main-navigation .menu > li > ul {
    display: block;
}
}

Let me know if it worked

Thanks!
Colorlib Support Team

3

Thank you Noda, your solution took me kind of halfway! Now the sub menu items are seen in the list, but the whole menu is expanded all the time. Is there a solution to have them collapsed/espanded as I’ve seen on other Colorlib themes?

Thanks a lot for helping out!

4

HI @nasbyviken

Why is this menu so different from our default menu? even markup is different, can i investigate this from the dashboard? please send me your access credentials along with your website URL and I will investigate this case. Don’t forget to mark your reply as private!
Thanks!
Colorlib Support Team

5

Hi there!

I have the same problem on my website with the drop-down not showing on mobile and tablet… I added the CSS you provided but nothing changed. Looks like the menu is hidden by the parallax header of the site… couldn’t get it to work with playing around with z-index either… what do you think could be the problem?

Other than that I am superduper happy with your theme - thanks for you work!

Thank you!
rara

6

Hello dear Rara

Looks like you fixed this problem because i no longer see this issue on your website, please see attached screenshot:

7

Hi Noda,

Thanks for your reply! Howerver, I have not been able to fix it, I didn’t do anything on the website since I postet last, and it still looks like in my first screenshot on my and and every other Mobile (iPhone and Android) I’ve tested out… what did you access the site with? I can’t see any attachments on your post… ?

Really appreciate your help.

8

Sorry, attachment was not added, please check it again and let me know if you have same screen

9

Hi again!

I do NOT have same Screen on iPhone, checked again with non-apple devices and it works there. Just not on the iPhone. What do you think could be the problem?

thanks

10

HI there

I just checked it with the Iphone 6 and it works fine, which model is your iphone?
Also, please check our main demo an let me know if we have same problem

11

I checked it with an iPhone 6 and 7, both look the same, with menu behind header image… Demo works though!

12

hi there

ok, lets try something like this:

@media (max-width: 991px){
.nav-bar .module-group {
background: #ffffff;
}
}

13

thanks!

I think I found the source of the error! It must be this:

/Navigation bar height/
.main-navigation {
height: 85px;
}

when I disable it, it works on the iPhone! But if I don’t have that, I get a stroke/gap between the menu and the header image on desktop view… is there another fix for that?

14

Nice, ok, please remove that css and use this one:

.main-navigation {
border-bottom: none !important;
}

15

Supercool =)
Thank you very much!!!

16

Nice to hear this problem finally resolved :slight_smile:
IS there anything else or can i close this ticket?

17

I’m good now =D Thanks!

18

Hi, there

ok I will now close the topic and mark it as resolved. Feel free to contact us again Thanks! :slight_smile: