BandB theme mobile menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

BandB theme mobile menu

Post by Smeleck »

We are using bandb theme on the latest version of CMS 2.2.12

An issue as been pointed out to us that when viewing in landscape on any mobile phone and then selecting the menu icon it does not show the full list of menu items. Its not possible to scroll down you can only see the first four or five items. You can see the full list in portrait mode.

Do you know how to overcome this.

Everything else works fine.

Thanks.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1610
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: BandB theme mobile menu

Post by DIGI3 »

I haven't been able to recreate this - which device/browser/version are you testing this on?

I tried it on iOS and Android, various browsers and versions, and all were able to scroll the mobile menu. It's not an ideal view, but for most mobile devices the theme switches to the desktop menu (dropdowns) when you view in landscape anyway.
Not getting the answer you need? CMSMS support options
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

Re: BandB theme mobile menu

Post by Smeleck »

Hi

It was reported to me the person was using Apple I6 my phone is a Sony Xperia X android and I get the same result.
If I open the site in portrait view and click the menu icon it shows all 9 items if I then rotate the phone it chops off 3 items and you cannot scroll down to see the others.

If do you not get these results there must something wrong with our site.

So could you suggest were I start looking the Top Nav template has not been changed and nothing in the master template relating to menu.

So what else could be interfering with the menu.

Thanks
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1610
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: BandB theme mobile menu

Post by DIGI3 »

Are you able to share the URL to the site?
Not getting the answer you need? CMSMS support options
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

Re: BandB theme mobile menu

Post by Smeleck »

No Problem.

www.busca.org.uk
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1610
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: BandB theme mobile menu

Post by DIGI3 »

I can recreate the issue on your site, but not on the bandb demo page (I've temporarily added a few extra test pages - http://easythemes.ca/demos/bandb/)

So I would suggest the issue is with your html, and would start by fixing all of the broken/unclosed tags and making sure it validates:
https://validator.w3.org/nu/?doc=https% ... .org.uk%2F
Not getting the answer you need? CMSMS support options
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

Re: BandB theme mobile menu

Post by Smeleck »

Hi Digb

I have tried doing what the Validator tells me but not everything is possible. There are a few <__script__ type "type text/javascript"> that I cannot find, also its not possible to remove the % from image widths fixed widths do not work on mobiles. So the Validator is suggesting items that are not possible.

So I decided to create a new test site using BandB theme it is www.busca.org.uk/mysite I have not changed anything only added 5 pages to the menu.

You get the same result with the mobile menu on landscape it cuts off the last few items. So could it be certain phones that is the issue? My phone is a Sony Xperia x unfortunately I don't have access to any others.

Could you please check my test site and see if you get the same result.

Thanks
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1610
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: BandB theme mobile menu

Post by DIGI3 »

It's good to work out as many of the validator suggestions as possible - but mostly I just meant the major issues like unclosed divs - they make troubleshooting almost impossible.

I was able to see the problem on your test site in certain browsers, and it looks like a known Foundation bug. Try adding this to your css:

Code: Select all

.is-at-bottom {
  top: 0 !important;
}
Not getting the answer you need? CMSMS support options
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

Re: BandB theme mobile menu

Post by Smeleck »

Tried that in both sites made no difference.

Can the css you provided go anywhere in the style sheet?
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1610
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: BandB theme mobile menu

Post by DIGI3 »

As long as it's not in one of the media queries, sure. Make sure you clear the caches (browser and cmsms).

It did fix it for me, but if it doesn't do it for you, you're going to need to do your own research. Here's where I found the suggestion: https://foundation.zurb.com/forum/posts ... -on-mobile
Not getting the answer you need? CMSMS support options
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

Re: BandB theme mobile menu

Post by Smeleck »

Hi again

Still searching for the solution.

But when I try the demo http://easythemes.ca/demos/bandb/

on my phone I get the same result it chops off the last two items.

So it appears the theme is not compatible with all mobiles phones.

Not sure what to try next, maybe there is no answer.
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1610
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: BandB theme mobile menu

Post by DIGI3 »

I was able to recreate it on some browsers, and a quick Google found this suggestion:

Code: Select all

.is-drilldown {
  overflow: visible !important;
}
I added this to the css on the demo site and it looks like it does the trick. It's something to do with having the drilldown as part of the sticky menu, I may need to rework it next time I update that theme.
Not getting the answer you need? CMSMS support options
Smeleck
Forum Members
Forum Members
Posts: 19
Joined: Tue Aug 14, 2018 6:35 pm

Re: BandB theme mobile menu

Post by Smeleck »

Hi

Removed the previous bit of code and added the new and it now works on my phone.

I will try now to get it checked on other phones.

A Big thanks.
Post Reply

Return to “Layout and Design (CSS & HTML)”