Keyword
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

  • Jordi Sorts Quintana
  • Jordi Sorts Quintana's Avatar Topic Author
  • Offline
  • Junior Member
More
6 years 3 months ago #136868 by Jordi Sorts Quintana
Jordi Sorts Quintana created the topic: Responsive menu on tablet
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.

More
6 years 3 months ago #136869 by Yiota Ziaggou
Yiota Ziaggou replied the 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.

Note to new users: Please remember to search the forum before posting a question!

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

  • Jordi Sorts Quintana
  • Jordi Sorts Quintana's Avatar Topic Author
  • Offline
  • Junior Member
More
6 years 3 months ago #136870 by Jordi Sorts Quintana
Jordi Sorts Quintana replied the topic: Responsive menu on tablet
Hello Yiota,

I put that inside the query:
#menuToggler { display: none; position: absolute; top: 0px; left: 0px; color: #888989; padding: 12px 20px 12px 34px; background: url(../images/icons/menuToggle.png) no-repeat 10px 50%; font-size: 18px; line-height: 20px; cursor: pointer; }
#menuToggler.menuActive { color: #fff; background-color: #df3720; }
.mainNavigation { display: block; }

but doesn't work .:(

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

More
6 years 3 months ago #136871 by Yiota Ziaggou
Yiota Ziaggou replied the 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; }

Note to new users: Please remember to search the forum before posting a question!

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

  • Jordi Sorts Quintana
  • Jordi Sorts Quintana's Avatar Topic Author
  • Offline
  • Junior Member
More
6 years 3 months ago #136872 by Jordi Sorts Quintana
Jordi Sorts Quintana replied the topic: Responsive menu on tablet
No work on landscape ....

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

More
6 years 3 months ago - 6 years 3 months ago #136873 by Yiota Ziaggou
Yiota Ziaggou replied the 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.

Note to new users: Please remember to search the forum before posting a question!

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

  • Jordi Sorts Quintana
  • Jordi Sorts Quintana's Avatar Topic Author
  • Offline
  • Junior Member
More
6 years 3 months ago #136874 by Jordi Sorts Quintana
Jordi Sorts Quintana replied the topic: Responsive menu on tablet
I don't understant, where I make this changes ?

I have that code:
@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) {
		
	/* 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; }

}

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

More
6 years 3 months ago #136875 by Yiota Ziaggou
Yiota Ziaggou replied the 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.

Note to new users: Please remember to search the forum before posting a question!

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

  • Jordi Sorts Quintana
  • Jordi Sorts Quintana's Avatar Topic Author
  • Offline
  • Junior Member
More
6 years 3 months ago #136876 by Jordi Sorts Quintana
Jordi Sorts Quintana replied the 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.

More
6 years 3 months ago #136877 by Yiota Ziaggou
Yiota Ziaggou replied the 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.

Note to new users: Please remember to search the forum before posting a question!

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


Powered by Kunena Forum