• 0

DMS 2 iPad Portrait Menu Responsive Handling


Question

Posted · Report post

What line do I have to change in the NavBar Section's style.less file to make the iPad view the menu as mobile when in portrait mode?

 

I understand I have to edit the @media queries but which one.

 

The menu must appear as mobile in portrait mode and as a full menu in landscape mode.

Share this post


Link to post
Share on other sites

12 answers to this question

  • 0

Posted · Report post

OK, try this:

 

@media (max-width: 780px) {
#site .navbar .nav-collapse {
overflow: hidden;
height: 0;
clear: both;
}
}
 
@media (max-width: 780px) {
#site .navbar .nav-btn-navbar {
display: inline-block;
}
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

In your custom CSS try adding the following:

 

@media (max-width: 766px) {
#site .navbar .nav-collapse {
overflow: hidden;
height: 0;
clear: both;
}
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still no luck. Same results.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Will it matter if I am using the "Full Width" Navbar?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you are wanting it for a tablet, then 766 isnt enough! Try @media (max-width: 899px)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Nope, still getting full menu.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The code I gave you should work, can you add it again and reply here when you have done so please.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, we seem to be getting somewhere now. It shows the mobile menu BUT the full menu also appears.

 

ScreenShot2014-06-09at81103AM_zpseb4b053

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

It seems to be over-riding the overflow and height so I added "!important" and it seems to work now.

 

#site .navbar .nav-collapse {
  1. overflowhidden !important;
  2. height0 !important;
  3. clearboth;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now