Eighties Theme Floating Menu on Mobile Devices
-
Hello there Themes Team!
I recently stumbled upon a forum post by a fellow WordPress.com Eighties Theme user concerned about the floating menu not functioning as expected on mobile devices. After enabling the theme’s mobile theme option and then testing both the menu and widget navigation on mobile devices including: an iPhone, iPad and an Android based phone, I came to the conclusion that neither menu nor widget navigation icons float on any of those devices.
Here are the CSS rules for both the main navigation and widget navigation:
media="all" @media screen and (max-width: 1000px) .site-toggles .main-navigation-toggle, .site-toggles .widget-area-toggle { position: static; background: #2d2d2d; color: #FFF; }Disabling the rule:
position: staticfrom multiple browsers’ developer tools (Firefox, Safari, Chrome) and then resizing browser windows to simulate tablets and mobile phones seems to resolve the issue.
Is there any chance that this issue can be fixed by the theme author/s?
Thanks so much!
Martin
The blog I need help with is: (visible only to logged in users)
-
After enabling the theme’s mobile theme option
Eighties, being a responsive design, you shouldn’t need to enable the mobile theme and if you go to Dashboard>Appearance>Mobile you should see a message like
Awesome! Your theme, Eighties, is already deemed to be mobile-friendly.
Can you then disable the mobile theme option and let us know what happens?
If I misunderstood and that wasn’t the problem, please post back here.
-
Justjennifer is right – you shouldn’t need to activate the separate mobile theme with a responsive theme like Eighties. Let us know how things look when you deactivate this option. The theme should adjust automatically to different screen sizes.
-
The mobile theme option was already disabled when we ran into this bug. The bug remains. Can it be fixed? Thanks.
-
I just tested your site on an iPhone 5 with Safari and the mobile menu appears to work as expected – here’s a screencast I made:
If you could take a screenshot of what you’re seeing and let me know the following info, that would be very helpful.
– what specific device you’re using (i.e. Nexus 7)
– what version of Android you’re using (i.e. Android 4.4.4 Kitkat) – visit http://whatismyandroidversion.com/ if you’re not sure
– what browser you’re using (Chrome)If there is indeed a bug, we’ll definitely want to fix it, but in order to do that we first need to see it. Thanks!
-
Notice how the menu widget scrolls with the page (disappears with the top of the page), and does not float and remain in view like it should. To be able to click the menu widget like you did, you had to scroll the page back up to see the widget at the top — a more pronounced issue when reading long pages. (Not sure I’m using the term “widget” correctly, but you know what I mean.) Thanks!
-
Ah, you mean that you would prefer the menu toggle to be fixed, instead of scrolling? That’s an aesthetic choice made by the theme developer, not a bug – the menu toggle does not remain fixed.
-
Well, all I know is that it “floats” in Windows 7 (my desktop) and Windows 8.1 (Surface 3), but not in my Apple or Android devices.
Here’s my site for a second example: dpyangblog.wordpress.com
Thanks for the Memorial Holiday support! -
That’s correct – the menu toggle is fixed at desktop sizes, but not on mobile screen sizes.
-
By “float” I mean it remains in view as I scroll down on a long page. Not sure I would use the term “fixed”. :-)
-
Not sure of why there’s a difference for “desktop” vs “mobile”, but it works properly (the toggle remains in view) on my Surface 3 which is “mobile”. Oh well.
-
BTW, that “float” feature is more useful on a small screen device than a large screen device, because higher probability of having to search for the menu toggle when reading on a small screen device.
-
By “float” I mean it remains in view as I scroll down on a long page. Not sure I would use the term “fixed”. :-)
I’m using that word because CSS terms, the position of the menu toggle is “fixed.”
http://learnlayout.com/position.html
A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
This is where that’s defined for the menu toggle in Eighties:
.site-toggles .main-navigation-toggle, .site-toggles .widget-area-toggle { background: #fff none repeat scroll 0 0; border-radius: 2px; color: #474747; font-size: 2.22222rem; left: 32px; line-height: 1; padding: 5px 10px; position: fixed; top: 46px; transition: color 100ms linear 0s; z-index: 999; }The line
position: fixed;is where that’s happening.Not sure of why there’s a difference for “desktop” vs “mobile”, but it works properly (the toggle remains in view) on my Surface 3 which is “mobile”. Oh well.
Modern responsive themes use CSS rules called media queries to control the display of a website at different screen sizes. The display is not dependent on the device, it’s dependent on the browser’s window size. Your Surface probably has a browser window size that triggers the “fixed/floating” positioning on the menu toggle.
-
For whatever it’s worth, my very limited experience on this issue leads me to think the desktop vs mobile difference is OS dependent, not screen size. For example, the menu toggle is “fixed” on my 10.8 inch Surface 3 (Windows 8.1), and not fixed on my 9.8 inch iPad (iOS), both tablets. “Position: fixed” seems to work perfectly on all Windows devices (even XP), but not on iOS nor Android devices.
I don’t suppose there’s a workaround for iOS and Android devices? Readers using those devices somehow need to be shown there’s more pages than just the home page. Most don’t associate the toggle with a menu — it’s just three small lines at the top of the page.
-
Hello kathrynwp and justjennifer,
Thanks so much for all the information that you have provided about the Eighties theme. I just wanted to say that I had the same experience with daaneee as far as not having the mobile option enabled when I initially recognized the issue that I thought I was having. I only enabled it afterwards and realized that enabling the option didn’t make a difference.
I agree with daaneee that the menu and widget toggles remaining visible on the screen as one scrolls pages down is a lot more useful on mobile devices due to their limited screen size. It is especially true for really long pages which I thought that “sticky” (or “fixed”) menus that are locked in place as a website viewer scrolls further down a page, were designed to address. Here’s a link to a screencast of a user’s experience, had sticky navigation been enabled for mobile devices.
I am considering upgrading to the Custom Design package and if I do, would I just be able to add some custom CSS rule to facilitate the sticky menu feature on mobile devices?
Once again, thanks a lot for your help.
Martin
-
Martin,
(more newbie questions)Is what you show in your screencast the solution? Can I do the same for my site to achieve the same result, or will something come along and over-write it? I noticed you didn’t do any saves. (Seems to me this fix should be implemented at the Theme level. No?)
Thanks. -
Hi,
What I did in my screencast is only simulating (or testing) what can potentially be done if we are able to edit the CSS (or style sheets). Depending on the response I get from my followup question above, a Custom Design upgrade could be a solution for your site by adding a rule to override the theme’s own rule that prevents the navigation from remaining fixed when viewed on mobile devices. I agree with you though, that ideally, that would be done at the theme level, but we could be making an incorrect assumption.
I hope that makes sense, but in the meantime, let’s see what kathrynwp says when she replies.
Have a good evening!
Martin
-
I am considering upgrading to the Custom Design package and if I do, would I just be able to add some custom CSS rule to facilitate the sticky menu feature on mobile devices?
Yes, exactly – you would be able to make a change similar to the one in your screencast, adding something like this to your custom CSS panel:
.js .site-toggles .main-navigation-toggle, .js .site-toggles .widget-area-toggle, .site-toggles .main-navigation-toggle, .site-toggles .widget-area-toggle { position: fixed; }Once a theme has been “in the wild” and in use by folks for this long (Eighties was released in August 2014) changes to the theme like this one generally aren’t made, since it will affect all users of the theme, some of whom may not desire the same change that you do. :)
-
-
- The topic ‘Eighties Theme Floating Menu on Mobile Devices’ is closed to new replies.
WordPress.com Forums 