DMS 2 ipad view causes section to be covered by menu

[nfp1900 29]

Hi

 

I'm working on this site  and things were fine until the client asked for additional menu items. On smaller screens the menu now jumps underneath the logo and hides the text section which appears on the pages: http://screencast.com/t/9Ke8YOG8M

 

Is the best way forward to have the nav and logo separate rather than using navi (more hassle) or is there some code that I can use to make this space responsive when needed? 

 

I used some css to increase the height which might be causing it. 

 

/* adjust height of navi area */

.pl-fixed-region.pl-region {

height: 100px;

}

 

Thanks

[Danny+ 1,327]

Hi,

 

What you want to do is either reduce the logo image size via media queries or reduce the font-size of your menu items.

[nfp1900 29]

Hi

 

I'm just working to fix this but for some reason no menu shows at all on the ipad but it does on the desktop and in other browsers. Not sure what is going on now, this is the link

 

What I need is to force a mobile menu before the screen width starts to cover the page title text boxes. http://screencast.com/t/e6E3dSZs0Uv

 

Thanks

[nfp1900 29]

sorry had inadvertently checked the 'hide for mobile users' - sorry being a bit of a twit. It's only in ipad landscape mode where I have the issues. The styling problem has arisen because the client asked for the logo to be increased. 

 

I can prob get away with shrinking it so that the menu and logo fit and to fix this quickly - can you point me in the right direction, thanks a lot for the help (as ever)

[Danny+ 1,327]

You will need to use media queries, to target the Navi section. You can either force the mobile menu to kick earlier or simply reduce the width of the image or menu items font-size.

 

You could also override the default styling for the Navi responsiveness by override the pl-objects.less from line 333 and onwards. However, you will need to use a child theme for this.

[nfp1900 29]

I'm really struggling to get this to work. All I need is that the mobile menu kicks in when the ipad is in landscape mode so the menu doesn't overlap the content when using the navi section as seen here http://screencast.com/t/tkx0TgvhYR3

 

I am using a child theme but what do I need to add so that the navi changes based on this criteria:

 

iPad in landscape

 

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}

[nfp1900 29]

I have also verified this in mobile view and the nav is hidden by the slider because the navi section isn't responding as it should. 

 

Whilst  it appears correct when inspecting it with chrome and the mobile view this isn't the case.

[Danny+ 1,327]

I have also verified this in mobile view and the nav is hidden by the slider because the navi section isn't responding as it should. 

 

Whilst  it appears correct when inspecting it with chrome and the mobile view this isn't the case.

 

Not sure what your post above is suppose to mean, can you go into greater detail please.

Also, we can't provide custom code to change your Navi responsiveness, all you need to do is override the default CSS. You can do this by either using custom Media Queries or use the method I mentioned above via the .less file.

[nfp1900 29]

I'm finding that even a small change to the CSS for navi appears to cause issues with the correct display of the menu in mobile vie It becomes hidden under a section)  and with very odd behaviour on tablets. 

 

Perhaps it's easier if you simply say that certain customisations are simply not recommended. 

[Danny+ 1,327]

Can you provide a screenshot of this menu being hidden please.