VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me

"Collapsed menu" for phones and tablets too
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: "Collapsed menu" for phones and tablets too

"Collapsed menu" for phones and tablets too 27 May 2016 23:07 #8899

Hi,

I saw that at these screen resolutions: 800x600, 768x1024, 1024x768, is displayed the "standard menu", like when you navigate the web site from a pc. In these cases I want to display the "collapsed menu" (the menu that is displayed when the resolution is low, like 320x480).

Where I can find the "@media" rules to change this behaviour?

Thank you
Last Edit: 27 May 2016 23:08 by me.

  • Posts:66
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: "Collapsed menu" for phones and tablets too 30 May 2016 03:57 #8906

You can add new rule into templates/jf_salina/css/template2.css:
 
@media (min-width: 768px) and (max-width: 1199px) {
...
}
 


joomfreak

  • Posts:2782
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: "Collapsed menu" for phones and tablets too 04 Jun 2016 14:22 #8935

isupport wrote:
You can add new rule into templates/jf_salina/css/template2.css:
 
@media (min-width: 768px) and (max-width: 1199px) {
...
}
 


joomfreak


Thank you for your answer.

What kind of rule I need to create inside media query?
Something like these:

 
 
I take these rules into templates/jf_salina/css/template.css
 
 
@media (min-width: 768px) and (max-width: 1199px) {
 
.navbar-fixed-top .container-fluid {
padding-left: 50px;
padding-right: 50px;
}
 
.navbar-default {
padding: 30px 0;
border: 0;
background-color: transparent;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
margin-bottom: 0;
}
.navbar-default .navbar-brand {
font-size: 24px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
font-weight: 900;
}
.navbar-default.navbar-shrink {
padding: 0;
background-color: #f6f6f6;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out
}
.navbar-default ul.nav-child:after {
position: absolute;
top: -6px;
margin-right: -10px;
right: 40%;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
}
 
 


Can I put these rules inside template2.css? or not?

Thank you


P.S.: I don't know why I haven't received the email that alert me about your answer.
Last Edit: 04 Jun 2016 14:23 by me.

  • Posts:66
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0

Re: "Collapsed menu" for phones and tablets too 12 Oct 2016 19:38 #9569

Have you found a full solution yet ?

I would like to do this too, but i am struggeling on how to do it ...

Tablet devices are using the normal menu, and there are too many menu items for to display on 1 horizontal line, the menu bar doubles in vertical size, covering page content ...

So i need to find a way to display the collapsed menu on tablet devices.
The resolution of the Galaxy Tab S2 is : 1536 x 2048 pixels

It would be so awesome if anyone could support this.
Attachments:
  • Attachment This image is hidden for guests. Please log in or register to see it.

  • Posts:4
  • knobs
  • Fresh Boarder
  • OFFLINE
  • Karma: 0

Re: "Collapsed menu" for phones and tablets too 14 Oct 2016 05:25 #9576

Hello every body,

Here is the instruction on how to change the breakpoint for mobile menu, I assumed we will show the mobile menu on 1000px:

Edit template.css file :
- On line 838: change 768px to 1000px
- On line 888: change 767px to 999px

Edit template2.css file :
- On line 1423: Change 768px to 1000px


You can find those 2 files on the CSS folder of the template.

Regards

JoomFreak

  • Posts:2782
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: "Collapsed menu" for phones and tablets too 31 Oct 2016 13:40 #9629

Thank you very much. It worked !

Keep a note that there are tablets and phones with a resolution : 1536 x 2048 pixels
And that those tablets layouts also need the collapsible menus.

You guys just freaking rock donkyballs.
Thank you.

  • Posts:4
  • knobs
  • Fresh Boarder
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 1.33 seconds
Saturday 17 August 2019

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.