Mobile menu is too long, wont scroll

  • 1
  • Question
  • Updated 3 years ago
  • Answered
On my mobile site, when I open the "hamburger menu" that drops down my pages, I have some sub-menus and when some are open the page locks and you cant scroll down to see the entire list.
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes

Posted 3 years ago

  • 1
Photo of André

André

  • 11 Posts
  • 0 Reply Likes
Hi Chris,

Thanks for getting in touch! You have not confirmed the site you are working in today, however based on your description and a related support request I have gone ahead and accessed your  'http://grandseniorliving.com/' site.

In reviewing your site, I see that it currently has 30 web pages. As a result of your web page number and your sites navigation menu setup, specifically your flyover menu, the mobile feature adapts to this intuitively, by creating an expand an collapse feature (You would have noticed a clickable downward and upward pointing arrow head). Please go ahead and select / deselect this so as to navigate between the pages in your site.

Please let us know if you will need more help, we're happy to assist!
(Edited)
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
Hi Andre. Yes, I was referring to GrandSeniorLiving.com. 

I understand the expand and collapse feature, however when I click expand it lists all the pages, but since there are so many some get cut off and it is not possible to scroll down to see the rest. It appears almost as if it is frozen. 
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Chris

The first thing I notice when I load your website on an iPhone is that you've fixated the header of your site. When scrolling down, the header stays, while your content is scrolling. It looks like this also affects your submenus. Due to the fixation, the submenus can no longer scroll down. Unless André can think of a better solution, I'd suggest to remove the fixation of the header altogether. I also feel it's a disadvantage for mobile devices to fix the header section because it limits the space left for displaying the content of your website.
(Edited)
Photo of chrisdhassan

chrisdhassan

  • 61 Posts
  • 3 Reply Likes
In order the keep the look and feel I want on the desktop version, the header needs to be fixated. 

Not possible to unfix it just for mobile?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
I'm afraid it's not possible to make individual settings only for the mobile version. If you fix the header, it will be fixated on smaller screens as well.
Photo of Big G

Big G

  • 65 Posts
  • 1 Reply Like
Can I ask how the effect of the images scrolling under the top bar navigation is achieved? Thanks in advance.
Photo of Saskia

Saskia

  • 110 Posts
  • 11 Reply Likes
Hello Big G,

If you would like to add a rotating banner to your banner area, the Animated GIF Generator is a neat program that can help you do this!

Please note: Before creating your rotating banner, please ensure the banner images that you want to use are the same dimensions. You will also need to look at the dimensions of the banner area of your style (this will be displayed at the top of the banner area when you mouseover the banner) so that you can create your banner to be the proper size.

Now you're ready to begin!

  1. Go to this link: Animated GIF Generator.
  2. Choose your dimensions - you will most likely want to select either "Leave original size" or "Custom size".
  3. You should see a grey colored box where you can upload your banners images. Click on "Add".
  4. Once you've added all your images, click on "Upload".
  5. When your images have uploaded, you can now select the number of seconds you want your images to be displayed as well as change the order of which the images appear.
  6. After you have set up your images the way you want, then click on "Submit".
  7. Click on "Save to computer" and upload your newly created rotating banner to your banner area.

For steps on how to do this, please check out this tutorial: Adding a Banner.

If I have misunderstood I apologize. Please get back to me with further clarification if needed.
Photo of Big G

Big G

  • 65 Posts
  • 1 Reply Like
Sorry, I didn't explain myself very well Saskia. What I meant was how do you get the effect of the site scrolling underneath the navigation banner? Hope the screen grabs explain what I mean. Thanks in advance.

Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Big G,

We've helped with some custom code for The Grand Senior Living site you are referencing. I'm happy to share the code with you via email for you to test on your site. Keep in mind it might need to be tweaked if you are using a different style and it's always best to test custom code on a sample website.