COMMUNITY FORUM

Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Responsive menu on tablet

Start
Prev
1
Next
End

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136868 by Jordi Sorts Quintana

Responsive menu on tablet was created by Jordi Sorts Quintana

Hello,

I want to know how to configure with css for show toggle menu on landscape tablet view ...

Thanks for your help !

Please Log in or Create an account to join the conversation.

Yiota
Offline
Elite Member

11 years 7 months ago #136869 by Yiota

Replied by Yiota on topic Responsive menu on tablet

Hello Jordi,

The media query that controls the menu toggler appears from 799px and lower resolutions.
You could use the following media query

@media only screen and (max-width: 1024px) and (orientation:landscape),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and and (max-width: 1024px) and (orientation:landscape),
only screen and (-o-min-device-pixel-ratio: 3/2) and and (max-width: 1024px) and (orientation:landscape),
only screen and (min-device-pixel-ratio: 1.5) and and (max-width: 1024px) and (orientation:landscape) {

}

to target the resolution and the landscape orientation of the device. Then locate the menu classes for the toggler and put them inside that query.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136870 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

Hello Yiota,

I put that inside the query:

Yiota
Offline
Elite Member

11 years 7 months ago #136871 by Yiota

Replied by Yiota on topic Responsive menu on tablet

Try with this code inside the media query tag

/* menu */
  .mainHeader { position: relative; }
  .menuWrapper { position: static; }
  #menuToggler { display: block; }
  nav.mainNavigation { display: none; position: absolute; left: -10px; width: 100%!important; max-width: 480px; padding: 0 20px; top: 43px; z-index: 999; margin: 0; background: #df3720; box-shadow: 0 2px 3px rgba(0,0,0,.2); }
 	/* Visibility */
	nav.mainNavigation ul.menu ul,
	nav.mainNavigation ul.menu ul ul,
	nav.mainNavigation ul.menu li:hover ul { position: static; display: none; width: 100%;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: 0 0 0 transparent; }
	nav.mainNavigation ul.menu li.active ul { display: block; }

	nav.mainNavigation ul.menu > li.active > a { color: #2f2f2f; }

	/* 1st level */
	nav.mainNavigation ul.menu { margin: 0 auto; width: 100%; padding: 5px 0 15px; text-align: left; }
	nav.mainNavigation ul.menu li { display: block; border: 0; }
	nav.mainNavigation ul.menu li a { color: #fff; }

	/* 2nd level */
	#mainNavigation .menu ul ul { left: 0; top:0; }

	/* 3rd level */
	nav.mainNavigation ul.menu ul ul { padding: 0; margin: 10px 0; }
	nav.mainNavigation ul.menu li ul li > a,
	nav.mainNavigation ul.menu ul li.parent a { padding: 8px 15px; background: transparent!important; font-size: 15px; }
	nav.mainNavigation ul.menu li ul ul li a { padding: 8px 15px; background: transparent!important; font-size: 13px; color: #2f2f2f; }
	nav.mainNavigation ul.menu li ul ul li a:hover { color: #2f2f2f; }

	/* active states */
	nav.mainNavigation ul.menu ul > li.active > a { color: #fff; }
	nav.mainNavigation ul.menu ul ul > li.active > a { color: #2f2f2f; }

	/* reset all borders and shadows */
	nav.mainNavigation ul.menu li a { display: block; padding: 8px; }
	nav.mainNavigation ul.menu > li > a:hover,
	nav.mainNavigation ul.menu > li:hover > a,
	nav.mainNavigation ul.menu > li.active > a {  box-shadow: 0 0 0 transparent; }

	/* parent indicators */
	nav.mainNavigation ul.menu > li.parent > a:after,
	nav.mainNavigation ul.menu li.parent li.parent > a:after,
	nav.mainNavigation ul.menu li.parent li.parent > a:hover:after,
	nav.mainNavigation ul.menu li.parent li.parent:hover > a:after { content: ""; display: none; }

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136872 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

No work on landscape ....

Please Log in or Create an account to join the conversation.

Yiota
Offline
Elite Member

11 years 7 months ago - 11 years 7 months ago #136873 by Yiota

Replied by Yiota on topic Responsive menu on tablet

Try this: change the

@media only screen and (max-width: 799px),... with
@media only screen and (max-width: 1024px),...

and
@media only screen and (min-width: 801px),... with
@media only screen and (min-width: 1026px),...

then comment out
@media only screen and (min-width: 800px) and (max-width: 910px)

This will change the whole site's behavior when viewing in lower than 1024px.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136874 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

I don't understant, where I make this changes ?

I have that code:

Yiota
Offline
Elite Member

11 years 7 months ago #136875 by Yiota

Replied by Yiota on topic Responsive menu on tablet

I'm sorry I didn't clarify that. Completely remove the above media query
@media only screen and (max-width: 1024px) and (orientation:landscape),....

Then locate the other media queries in template.css and make the substitutions for the pixels according to my previous response.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136876 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

In template.css ? I'm doing that in custom.css isn't correct ?

Please Log in or Create an account to join the conversation.

Yiota
Offline
Elite Member

11 years 7 months ago #136877 by Yiota

Replied by Yiota on topic Responsive menu on tablet

for this change to take affect you need to make the change in template.css.
In case of an update just keep in mind to re-apply these changes.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136878 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

Ok.

But the toggle menu on landscape always is active now ....

Please Log in or Create an account to join the conversation.

Yiota
Offline
Elite Member

11 years 7 months ago #136879 by Yiota

Replied by Yiota on topic Responsive menu on tablet

The media query px should be replaced in all max-width and not just the first line, like
@media only screen and (max-width: 1024px),
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width : 1024px),
only screen and (-o-min-device-pixel-ratio: 3/2) and (max-width : 1024px),
only screen and (min-device-pixel-ratio: 1.5) and (max-width : 1024px) { ...

same with 1026px media query.
Also in your media query in custom.css you should also change the 799px with 1024px and remove the

/* Visibility */
nav.mainNavigation ul.menu ul,
nav.mainNavigation ul.menu ul ul,
nav.mainNavigation ul.menu li:hover ul { display:block; }
since it is now covered by the other media query in template.css

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136880 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

Many many many thanks !!!

Now it's working perfect !

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136881 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

Hello another time ...

Now the problem is with sub-items, in responsive menu isn't displayed ...

Thanks.

Please Log in or Create an account to join the conversation.

Yiota
Offline
Elite Member

11 years 7 months ago #136882 by Yiota

Replied by Yiota on topic Responsive menu on tablet

In line 2057 (template.css) there is the following statement.
nav.mainNavigation ul.menu ul, nav.mainNavigation ul.menu ul ul, nav.mainNavigation ul.menu li:hover ul { .... }

replace the display:none; with display:block;

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Jordi Sorts Quintana
Topic Author
Offline
Junior Member

11 years 7 months ago #136883 by Jordi Sorts Quintana

Replied by Jordi Sorts Quintana on topic Responsive menu on tablet

Great ! Now it's working perfect.

Many thanks !

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End