Pique: please make menu fixed on mobile while scrolling
-
For the desktop version and iPad/tablet verions of the Pique theme my menu stays fixed and is visible at the top as you scroll. For consistency of the user experience, is it possible to also have my menu fixed and visible at the top on mobile as I scroll? If so, what is the CSS I need to apply to make this work?
Since my menu refers to anchors in the panels on the frontpage, if a person using a mobile clicks on the menu and a jump occurs to a panel, without a menu staying fixed, a person can get lost.
Thank you.
The blog I need help with is: (visible only to logged in users)
-
Hi, this turned out to be easier than I thought it would. Add the following to the bottom of your custom CSS.
@media screen and (max-width: 767px) { .sticky { bottom: auto; position: fixed; top: 0; } } -
I really appreciate with the help… but there’s still one problem: the menu absolutely stays pinned, but once the jump takes place, the menu stays open and covers the page.
I know: I must seem like a whiner.
Is there anyway to prevent that from happening (that is, is there any way once the jump takes place, the menu closes)?
Thanks in advance!
-
The three dots on the right end of the menu is a toggle. Click or tap to open and then click or tap to close. Are you saying that once you click on something like “Messenger Newsletter” that when that page opens, the menu still stays open?
-
Yes, that’s what I am saying. On the iPhone, when you click on a menu item, it jumps to the right location in the page, but the main menu stays open, covering the page.
-
Hi and thanks for the clarification. I hadn’t noticed that when viewing on my phone, but do see it now.
The theme is working as designed, and typically something like this isn’t changed after a theme has been live for a while since it can cause others using the theme to wonder why it changed, but I’m going to chat with our developers and see if this is something that they will consider changing. I’ll get back to you after I chat with them on this.
-
I appreciate the consideration.
It seems to me like a design flaw. You really should maintain a menu pinned, especially on a small form factor mobile device. Leaving the menu open seems to be not useful, again, especially on a small form factor device.
If they really want to maintain the functionality as it is, I’d love to understand their reasoning. Also, if that’s the case, I’d also like to be pointed to another template that might work more the way I’d like it to.
Thanks again for your continued support on this.
Tom
-
You are welcome, Tom, and I’m waiting to hear back. I’ll post here as soon as I hear something.
-
Tom, we are in the midst of some theme updates, and Pique is one of them getting the updates, and the menu issue on smaller screens (it staying open when you scroll back up) will be changed so that the menu closes. Watch for an announcement in your dashboard for “Pique 2”. You can then switch to that new version.
-
I am both excited and scared silly by this news of Pique 2! I’ve never done a template cutover on WordPress.
I’ll keep looking out.
Tom
-
Tom, the majority of the changes are for compatibility and to bring certain things up to current standards, and it should be a totally seamless switchover for you. If it isn’t, you know where I am. :)
-
-
- The topic ‘Pique: please make menu fixed on mobile while scrolling’ is closed to new replies.
WordPress.com Forums 