1

I'm using a Joomla template which adapts to diferent screen sizes. When the screen has no enough width the "main menu" changes to the mobile version. This works fine on mobile phones and small tablets, but on big resolution tablets like the ipad mini, the main menu won't change to the mobile version.

My aim is to always display the mobile version of the menu, no matter how big is the screen of the device.

I believe that what I need to change is this line on the css file:

@media screen and (max-width: 750px){

I tried changing 750px to 1080px but nothing happens. I even changed 750px to 10px and the website behaves the same.

All @media queries:

/* MOBILE ONLY CALLS
----------------------------------------------------------- */

@media screen and (max-width: 750px){

/* VERY SMALL CSS
----------------------------------------------------------- */

@media screen and (max-width: 240px){

    /* Retina Display Images */
    @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {

The original css file: http://www.mediafire.com/view/s4ng67ng6m4g4f9/s5_responsive_bars.css

maeq
  • 1,023
  • 1
  • 12
  • 19
  • use @media screen and (min-width: 750px) and (max-width: 765px) – SanRyu Sep 19 '14 at 08:35
  • "My aim is to always display the mobile version of the menu, no matter how big is the screen of the device" you mean only for mobile devices or pc screen too? Please add all media queries that your template use to help you debug them. – emmanuel Sep 19 '14 at 08:39
  • It depends on the resolution of the ipad (or mobile) - some have hi-def so the screen size will actually be the same as some desktop machines. [You can use js to detect the device type](http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery) and then change the styles based on that – Pete Sep 19 '14 at 08:44
  • SanRyu I changed this '@media screen and (max-width: 750px){' to 'use @media screen and (min-width: 750px) and (max-width: 765px)' and now the website doesn't show at all the mobile version of the menu. – maeq Sep 19 '14 at 08:45
  • @emmanuel Yes, on pc screen too. I always want the mobile version of the menu. I will add all media queries to the question – maeq Sep 19 '14 at 08:47
  • remove media query where @media screen and (min-width: 751px){} – himanshu Sep 19 '14 at 08:48
  • @himanshu Hi, I don't have any '(min-width' on the .css file – maeq Sep 19 '14 at 08:52
  • and changing max-width to 2000 also doesn't work? – himanshu Sep 19 '14 at 08:52
  • @himanshu changing it to 2000px does nothing at all. It keeps working fine on small screens and showing the desktop version on big screens – maeq Sep 19 '14 at 09:07

1 Answers1

1

There would be some class to hide the main menu and show the mobile like .main-menu { display: none; } .mobile-menu { display: block; }.

You have to find that, put it outside of media queries and remove all menu class instances from media queries.

Hope this helps

emmanuel
  • 9,385
  • 10
  • 21
  • 37
  • I will give it a try and I'll get back to you later. Thanks – maeq Sep 19 '14 at 09:00
  • By the way... this is the original css file.. If you feel like giving it a try.. http://www.mediafire.com/view/s4ng67ng6m4g4f9/s5_responsive_bars.css – maeq Sep 19 '14 at 09:10
  • 1
    You have to put outside of media query #s5_menu_wrap { display:none; } and all rules starting with #s5_responsive_mobile_drop_down_menu. – emmanuel Sep 19 '14 at 09:16
  • I did what you told me. I put at the start of the code #s5_menu_wrap { display:none } and all rules starting with #s5_responsive_mobile_drop_down_menu. Now what have changed is that the main menu doesnt show on big screens. Here is the file modified file: http://www.mediafire.com/view/oyk9r8bup5uadko/s5_responsive_bars-modify.css – maeq Sep 19 '14 at 10:01
  • There may be in another file a rule to hide mobile menu, please find that and remove that. – emmanuel Sep 19 '14 at 10:03
  • How can I contact with you? I'd like to make you an offer – maeq Sep 19 '14 at 11:00
  • I have just updated my profile details, please use this mail. – emmanuel Sep 19 '14 at 11:09