Poor menu options in mobile versions of sites?

@Mike4, Yes you can do that sort of navigation by introducing “Sections”. If you follow this link to Duncan’s site he explains how it works - https://sparkleapp.com/docs/menus.html

By introducing a “Section” and then placing web pages in it (referred to as a sub-menu) you will get the dropdown navigation effect you are looking for.
Good luck! :slight_smile:

Thanks greenskin. This is how I did my menus in the past and the dropdown navigation menus covered over and obscured part of the content of the web page being viewed at the time. I’m looking for a way to move the page content downwards to create a space for the menu to be displayed, as happens in the example website I posted. I note it is written in WordPress though.

If this is possible, could you be a little more specific about whereabouts in the help page you posted I should be focusing my attention please? Many thanks!

@Mike4, I think I know what you mean now… So you want a fair amount of vertical space between your navigation bar and the reading text/content.

I’m going to use the website example you have given me to go by… Drop on the canvas a wide-box and position it where you’d like on the canvas - this is going to be the navigation bar. Then (if you haven’t already) place a “Menu” element on the canvas and arrange it so it sits on the wide-box. When you are happy with your navigation click on the wide-box and all your menu navigation and when you have it all clicked right-click and group. Now the wide box and the main navigation can be moved around as one on the canvas to where you’d like to have it so to clear the content below it when using your sub-navigation dropdown. I’m hoping I got the answer your’e looking for this time round! :slight_smile:

You can make this with Sparkle of course :slight_smile:

1 Like

@RPX Thank you so much! Just watched your video and yes I think this does what I was trying to do. Your video runs quite fast so I’ll need to watch it quite a few times to fully grasp what how you did it.

As a general comment it has always struck me that navigation is the foundation of good basic website design and it is never focused on sufficiently in any web design training I ever encounter. The tools are there in Sparkle and I need to learn how to use them as you just illustrated in your video. For self-employed people like me who do their own website design in little bits of time snatched from the bigger work of actually running their whole business, figuring out these techniques can be difficult and usually never happens so help like this is invaluable. And it’s people like me who I imagine are a large chunk of your customer base. It is very different from being a full time web designer or app developer (as I imagine you are), totally immersed in their subject.

Thank you again, it will take me quite some time to absorb your video but I’ll get there eventually!

Hello @RPX

Thank you for the video! :+1: :slightly_smiling_face:

And thank you for your time and effort to record it.
I am sure many people will find this helpful.

Screen recordings are great, because when you see each step that is needed to accomplish something, it’s easier to understand than reading about it.

I use the same approach when designing a website: a different (optimised) menu for each device. And with Sparkle you can do this really easily, I think. It’s one of those features of Sparkle I’m really grateful for … one among many, many, many … :smile:

Yes, thanks so much for this.

@RPX Ok I’ve copied your video to make a site to test if I can do it. The links in the mobile version look correct but all of them lead back to the home page. I must have left out something or done something wrong but can’t figure out what! Can you spot the error please?

Here is the site, just a near copy of your video but with some sample text on each page too.

www.bryant.org.uk

Thanks!
Mike

Edit to add: This morning I’ve followed the video again, twice, and added two more menus to that experiment site. Both the new menus work as they should. They are just positioned on top of the page content but serve to illustrate I’ve made the method work. I’ve left the top (original) menu that doesn’t work in place as a curiosity. No need to work out why it doesn’t work as menus 2 and 3 are successful.

About the original (nav): on mobile device, try to bring the ‘menu’ on top.

10

That’s it! Moved that top menu to the front on all the pages and it works correctly now. Many thanks!

Jus a note to anyone else with this problem, I found moving the menu to the front on just the home page was not enough, it needed to be moved to the front on each separate page, one page at a time.

@Mike4, Yes that would be correct, but if you had your main menu “grouped” on your homepage and then “Show on all pages” then you would move your menu placement to the top on your homepage and then this would do it for every page your main menu sits on. That also goes for any changes you make in your “grouped” main menu… it would update all your main menus on all your different pages.

I’ve just been trying to get this method to work on a slightly bigger site of mine, one with five links in the top level menu, but one link is a drop down list of links to five more pages. I can’t get this to work.

The link containing the drop down box will not drag into the “Menu” item so I guess it i not possible with nested menus. Is there something I’m doing wrong or is there another similar way to deal with navigating larger sites on mobile?

I have another site with 75 pages (of just text and photos) in several sections and navigation on that looks pretty poor on the mobile version. I need to find a way to improve that next. Any suggestions or examples please?

Many thanks…

@Mike4, that’s why a seperate navigation page (or the hamburger menu) for mobile devices is a better choice. Because the vertical menu isn’t working with 3th level pages.

Hard to tell how to improve the poor looks without a visual. If possible, do you have a demo of this?

Grtz.

@RPX My 16 page site navigation looks reasonable on a mobile now, using your ideas thanks. But I’m unsure how my 76 page site of similar nature will be any good using the same sort of technique! Here is the 16 page live site:
www.pulsacoil-repairs.co.uk

And this is the bigger site with mobile navigation I think needs much improvement
www.miketheboilerman.com

Thanks for any thoughts you have…
Mike

@Mike4 Sorry for the delay. Was on holiday. :slight_smile:
I still think it’s better to use a separate page for the mobile navigation.
And using different projects can make you’re site less complex and easier to make the navigation.
For example: 1 project for your the homepage with the regular (classic) pages (Home, contact, about me, … ).
1 project for the ‘Boilers’ general.
1 project for the ‘Boilers I fix’.
Etc
Put the 'privacy policy in the footer.
Doing this, you have much more control of the total site!

Grtz.

1 Like

Thanks RPX. I’m still not sure about the difference between using the separate page for mobile navigation you mention, and using the technique in your video posted earlier in this thread. I think I need to go back and review everything you and greenskin have written about this.

My experience, you have much more control over the navigation.

Hello RPX, I wanted to have a look at your video, but it does not work, did you take it away? It says video with supported format and MIME-type not found… ;-((

hi @geneprofi, sounds like a browser compatibility issue, I see @RPX’s video fine. What browser gives you that error?

I use Firefox 89.01 Quantum, but I tried it again after a restart and it works acutally. Thanks for your feedback Duncan.