Hello there! Welcome to Youjoomla Support Forums

We are Web Development Company specializing in Joomla Templates , Joomla Extensions and WordPress Themes development . You are not able to see some forum threads due to your memberhip level. To unlock all forums and special customer support please take few moments to signup . If you are just searching for free joomla templates , or free joomla extension support simply head to our Free Joomla Support forums and open a new thread. Our moderators will help you as soon as possible. To spead up the response time please take few seconds and go over forum rules

Have fun!

[SOLVED] Cannot get responsive classes to work on mobile menu

10-03-2014, 01:17 PM
# 1 (permalink)
achartier
I am trying to add responsive classes to my menu items in the Link CSS Style under the Link Type Options. For Desktop and Medium they seem to work. I can use hidden-lg and hidden-md (or the visible equivalents) and they seem to react properly based on the screen size.

Problem I have is none of the classes have any effect when the menu switches to mobile view. Have I missed something? Is this the way it is supposed to work? If so how do we hide/show menu items in mobile view based on screen size?

Thanks.

Are you sure your are posting in product assigned forum?: Yes

What is your CMS version?: Joomla 2.5

MySQL Version: 5.x

PHP version: 5.x

Link to installation: unavaliable

Have you edited any files? If yes tell us which ones.: No

Is this personal or client website?: Personal
10-04-2014, 06:27 AM
# 2 (permalink)
neo
add to suggestions please
https://github.com/YJSGframework/yjsg/issues

reason why it does not work is because the menu you see on mobiles is a select and it did not inherit the class you added
10-04-2014, 06:53 AM
# 3 (permalink)
achartier
I have added it. Hope the description makes sense.
10-06-2014, 03:56 PM
# 4 (permalink)
achartier
The update from today fixed the problem. I have a follow on issue though.

There does not seem to be a correlation between the visibility size options and when the menu actually switches to dropdown mode. I have a menu item with visibility-lg (desktop) but I can shrink my browser window to a point where the menu switches but the menu item is still visible in the dropdown list. I refresh my browser and clear cache without any impact.

Is there a configuration setting for this somewhere that I can make these sizes match the menu switch?

Thanks.
10-06-2014, 04:03 PM
# 5 (permalink)
neo
menu switches on 979 px , bootsrtap is doing switch for visible-lg on 992
so they are 7px apart and note that YJSG was not build on bootstrap , it just lets you use it

what I would do is this in custom.css

Code:

@media screen and (max-width: 979px) {
  .hide_menu{
    display:none;
  }
}
and use hide_menu class instead bootstrap class names
10-06-2014, 04:35 PM
# 6 (permalink)
achartier
When I first implemented the above css it seemed to work but as soon as I refresh the page the menu item is back. It appears to have something to do with the system cache because if I clear the cache and then refresh the menu item disappears, but once I refresh again (without clearing cache) it returns. I tried this 5-6 times with the same results.
10-06-2014, 07:14 PM
# 7 (permalink)
achartier
Upon further testing the patch to correct the mobile menu is not working. The css class is not propagating to the select option list (I'm not even sure it can, I'm no expert). I have included hidden-xs and hidden-md on the css for the last login menu option shown in the following screen grab: Screenshot by Lightshot

As you can see, none of the css selectors are included. I am running version 2.1.1 of the plugin.
10-07-2014, 07:36 AM
# 9 (permalink)
achartier
OK. I tried this on the Eximium demo install and it does work. Also the standard bootstrap classes also seem to work. There must be something on my site causing the issue. I will pursue.

Sorry, I should have tested this on the vanilla demo first. I will do so in the future before reporting an issue.
Thread Tools
Display Modes

Powered by vBulletin®
Copyright ©2000 - 2023, Jelsoft Enterprises Ltd.

Members Login

Username
Password