Mobil view

[Miikka69]

Don’t see the top menu in Mobile View?

[Zex]

Hello, Miikka69!

To enable the top navigation in your mobile menu, simply go to the
Customizing ▸ Navigations ▸ Navigation Mobile menu and turn on the Mobile Top Navigation.
https://prnt.sc/ojwiwn

Now your “top” menu should appear below the main menu.

Regards

[Miikka69]

Thanks a lot, follow up question, can’t you change the order so that the top menu comes first?

[Zex]

Hello Miikka!

I think in that case your mobile menu would be too high and your menu links might be too low. It’s a better option to place them side by side.
https://prnt.sc/on10qk

If you want to do this, insert the following codes into Customizing-> General-> Additional CSS:

.mobile-menu .mega-menu-wrap{
width: 50%!important;
float: right!important;
}
.mobile-topnav{
width: 50%!important;
float:left!important;
border-right: 1px solid white;
background:linear-gradient(to bottom, #ec4028, #c13c2a);
height:280px;
}

.mobile-topnav li,
.mobile-topnav li a{
color:white!important;
}

Regards

[Miikka69]

Thousands of thanks! It works 100% now that I did a little bit of code editing!

[Zex]

This reply has been marked as private.

[Miikka69]

I added a search field to the top bar and the code stopped working, could you please advise again. Thank you in advance!

[Zex]

Hello, Miikka!

I don’t see any search box in your top menu…

If you want to have it, maybe you should try solutions from the next threads:

https://theme-vision.com/forums/topic/how-do-i-place-the-search-engine-on-the-cover-for-mobile-phones/#post-15686

https://theme-vision.com/forums/topic/search-option-in-social-menu/#post-12343

Please let me know if this is not what you are looking for.

Regards

[Miikka69]

See the pictures:
https://prnt.sc/oq40up

https://prnt.sc/oq42rb

The menus were side by side and not down. You made a css code to make it work. But when I added the third piece, it stopped working.

[Zex]

The following code should work:

.mobile-menu .mega-menu-wrap {
width: 65%!important;
float: right!important;
}
.mobile-topnav{
width: 35%!important;
	float:left!important;
height:288px;
}

.mobile-topnav li,
.mobile-topnav li a{
color:black!important;
}			

Unfortunately, I can’t test it until you enable search in the top menu.

If the code fails, enable search and let me know then I’ll give you the appropriate code.

Regards

[Miikka69]

Ah, now I know why you can’t see the search box, it’s not in english yet, sorry my mistake!

[Zex]

Hi,

The code works just fine on my side…

Chrome:
Search_Chrome

Firefox:
search_Firefox

Have you tried to clear the browser’s cache?

What browser do you use?

[Author]

Posts