VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
CHECK OUT OUR PAGE ON GOOGLE +
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:45
  • 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:2031
  • 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:45
  • me
  • Senior Boarder
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 0.47 seconds

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.