T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (5)

Resolved Responsive side bar

0
Votes
Undo
  1. Zdeněk Štěpánek
    Zdeněk Štěpánek
  2. Sherlock Holmes
  3. General Discussion
  4. Wednesday, 19 March 2014
  5.  Subscribe via email
Hello, I just wanted to ask you if its possible to make a sidebar menu responsive. Lets say I wont have a horizontal menu, but only sidebar menu in sidebar-1 position. How can I make it collapsed in mobile and small tablet view. Here is the example: http://www.enext.cz/rajpoutniku/

Thank you so much for the answer.
Comment
There are no comments made yet.
Responses (5)
Zdeněk Štěpánek
Zdeněk Štěpánek
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
What i would like to do is to create megamenu that will be signed to same menu in the sidebar, that will be hidden and will show only on mobile and small tablet view. Can I use .hidden-desktop and .hidden-tablet classes in my media queries? I am not sure if this is the right way to do it.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Zdeněk Štěpánek
Zdeněk Štěpánek
Sherlock Holmes
Accepted Answer Pending Moderation
1
Votes
Undo
Solution for this is .t3-mainnav,.t3-mainnav .navbar hide in media queries for desktop. Google has no problem with hiding the content in order to make better website and UX experience.

Great! :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Congratulation, Zdeněk Štěpánek :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Chamira Athauda
Chamira Athauda
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Yes, thanks Zdeněk Štěpánek, I was thinking about this for some time and then realized this as well, your post was a great help.

Basically you need to create two menu modules for the main navigation.
Put one in the mainnav positions and hide it using CSS.
Then the other in the sidebar position.

I then used the joomla-responsive.less file to add the code to hide the sidebar and display the main navigation at @media (max-width: @navbarCollapseWidth).
This value is set at 767px in variables.less.

The brilliant thing is at this point the main navigation only appears as the mobile menu icon, and the sidebar is removed.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Yeah, it a great tutorial.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.