Jump to content

Archived

This topic is now archived and is closed to further replies.

nfp1900

ipad view causes section to be covered by menu

Recommended Posts

nfp1900

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

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

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

Share this post


Link to post
Share on other sites
nfp1900

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)

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

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 */}

Share this post


Link to post
Share on other sites
nfp1900

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.

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
nfp1900

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. 

Share this post


Link to post
Share on other sites
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×