MSOCIAL OVERLAY NAVIGATION ON MOBILE

Sorry for - maybe - a stupid question. How I can make the - switched to OVERLAY - Navigation visible on mobile devices?

Thx apprciate! Harry

Hi,

You can change type of the menu in the MSocial -> Template Options -> Navigation tab.

Thanks Piotr,

I did it. It works perfect on DESKTOP but NOT WORKING @ mobiles .....

Could you provide an URL to your website? (here or via PM)

Joop no prob - http://y5gjt.w4yserver.at/2/

Ok, but do you have main menu enabled? Appearance - > Menus? Because I don't see the menu on the top.

Please find the following code in css/tablet.css file: (around line 216)

Code: Select all

#gk-top .menu {
display: none;
}

and after this lines add this code:

Code: Select all

#gk-top .menu.gk-menu-overlay {
   display: block;
}

Sorry no solution!

The menu is OK MAIN NAVIGATION is activated in ALL Appearances. Before your CODE it DID NOT SHOW ANYTHING when the window is going smaller .... after I get less than 820 pixel the NAVIGATION is gone but there is NO MOBILE or TABLET NAvigation!

AFTER I put your CODE into the tablet.css I see ALWAYS the MAIN NAVIGATION IN A ROW!

BUT YOU HAVE THE SAME PROBLEM ON YOUR OWN DEMO SIDE Msocial - change the MENU to OVERLAY on the left side and you will see what happens. This is maybe a mistake inside the Javascript or so ....

I send you some screenshots to know what I mean!

Appreciate your help for now ...

regard harry

Here are the files ...

2. part the before pics

Here you can see YOUR OWN TEMPLATE THEME with the same problem!

You're right, there's a problem with this menu, we'll fix in the nearest theme update, but please check joomla version of this theme:
http://demo.gavick.com/joomla25/msocial/
The overlay menu is always in one row, of course I have to also use smaller font-size on mobile/tablets for menu items.

It's not the same menu as on the https://www.gavick.com/ so my code should be ok. Tommorow I'll check this exactly and give you full solution.

Piotr, I have WP 3.9 not Joomla!

Thanks for help in advance!

regards Harry

Yes I know, but check this joomla version (it's the same overlay menu as should be in WordPress version).

So you should add this code into css/tablet.css file:

Code: Select all

#gk-top .menu.gk-menu-overlay {
   clear: both;
   float: left;
   display: block;
}

#main-menu > li,
#main-menu > li a {   
   height: 40px;
   line-height: 41px;
   font-size: 12px;
}

#main-menu > li {
   margin: 0 10px 0 0!important
}

I'll add this code into the next theme update.

It is the same problem it DID NOT SHOW THE MENU ICON (small in the right Corner)

I'm trying to explain you, that this theme dosesn't have this menu icon (small in the right corner) - because it's overlay menu, this icon is available only for classic menu.

OK so it means, that THIS THEME HAS NO MENUE OM MOBILE AND PAD BROWSER ????

So I can use THIS ONLY with CLASSIC MODUS!

OK i got you - thanks a lot!

Harry

Not exactly, when you add my code, you can use both classic and overlay menu (overlay menu looks also ok on mobile and tablets even without this menu icon - when you click menu item on e.g. mobile phone - appearance of the overlay is matched to mobile browser.)

OK I found out what you mean Piotr! Thanks

I just thought maybe it can look the same as CLASSIC MENUE on mobile phones.

I dont like the small links instead the icon - looks better and more pro!

But for now thank yu for your great support!

CU Harry