Clarifying Mobile Menu Issues

  • Author
    Posts
  • #114083
    uisdean
    Power User

    Hi Cryout Creations,
    I’m using Fluida. I have the Serious Slider installed. The Menu in question is in the Header. I noted this issue on an iPhone 6 and a very old Samsung Tab 4 running Android 4.4.2.
    Looks like I need to include directions for users/visitors to my site to be sure to tap the teeny-tiny arrow icon in order to expand the menu on small screens like iPhones. On big screens like a laptop when the mouse/cursor hovers over the menu text it automatically expands. Tapping on a small screen does not. Instead, for the “Main Menu” text, it returns to the home page. For other categories, etc, it takes the user to the category/item heading but does not expand. The user has to specifically tap that teeny-tiny little arrow.
    Perhaps this is now “standard” for menus on small screens? I have not tested many sites, but so far I have not noticed this on other sites.
    Is this part of the WordPress upgrade that messed up the menus on small screens? Can I do something to fix it? Other than provide the instructions as mentioned earlier?
    Rejoice Always!
    Uisdean

    Website: www.alwaysrejoicing.com

    #114129
    uisdean
    Power User

    Update on the Menu Question:
    It turns out that the menu has more problems.
    1.) Using a computer with a monitor I discovered that the menu will extend out of the window. So not all of it is readable/available. The way to overcome this problem is to make the window narrow so that the little ‘hamburger’ icon appears. Then the full menu is available…under the caveats mention in the first post on this subject (above).
    2.) On larger screens the number if menu items is limited by the fact that if there are a large number they will form two rows…and the bottom rows will cover the first entry from the menu item above it. I have played with the menu and modified it so that there is only one row. Unfortunately, I have to hide the site icon in order to get the menu all the way to the left. If I could do that, it would probably work much like the menu in Mantra. I don’t want to remove the site icon, since everyone knows that clicking on it will return to the home page.

    None of this is acceptable. I have put a ton of time into making Fluida work, only now I discover that the menu system is highly flawed. I am really glad I did not purchase the Plus version.

    So far: Mantra has the best menu system of the themes I have used. I don’t like Verbosa’s system. (see https://foreverstone.alwaysrejoicing.com and you’ll know why.) Parabola had a good system, but it won’t work on certain iPhones. Now Fluida’s menu system is highly flawed.

    The time spent implementing Fluida is not totally wasted, as I learned much about themes from the process. So, I guess I’ll have to search for another theme. Ultimately, this is my fault. I should have spent more time testing the menu system before I chose to implement the theme. Lesson Learned.

    Rejoice Always!
    Uisdean

    Website: www.alwaysrejoicing.com

    #114135
    uisdean
    Power User

    Post Script to the above: I had forgotten the problem with the menu system in Verbosa, I just remember that I had a difficult time with it. My solution was to rename everything to short names. It works fine, now.
    –Uisdean

    #114152
    uisdean
    Power User

    Hi Cryout Creations,
    I think I found a solution: the BRAVADA Theme. It is very much like FLUIDA. The good thing is that the menu seems to work better. I’ve tried it in a shortened window and it seems to work okay…except it still has the tiny arrow. Even so, with a dark background that little arrow can be seen and it works well on the iPhone 6.

    I’m testing it on the ‘test’ site sub-domain. I don’t have a ton of stuff on that site, but there’s enough for most things.

    It may be the Typography but the text is much larger on the iPhone, therefore, it’s easier to see the little arrow and touch it with my finger.

    So, I think you can put me back in the “Happy Camper” column.

    Rejoice Always!
    Uisdean

    Website: www.alwaysrejoicing.com

    #114683
    Zed
    Cryout Creations mastermind

    Hi,

    You could potentially make the mobile menu drop-down toggling arrows more visible by wrapping them with rectangles:

    #mobile-menu .dropdown-toggle {
        border: 1px solid;
        margin: 3px 5px 3px 15px;
        padding: 0.2em 0.6em;
    }

    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
    #115663
    uisdean
    Power User

    Hi Zed,
    The Code works on my “test site” without any trouble. So I just might add it to my actual site. The little boxes do make it easier to see the arrow.

    Confession: I’ve looked at a number of sites and most of them use the “little tiny arrows” just as Cryout Creations does. Therefore, I DO APOLOGIZE. They are a ‘standard’ menu item. Everyone should know about them (including me). So, Please Accept My Apology.

    BTW: I’m really happy with FLUIDA.

    Rejoice Always!
    Uisdean

    Website: www.alwaysrejoicing.com

Viewing 6 posts - 1 through 6 (of 6 total)

You need to log in to reply to this topic.