[Support request] Trying to match Flex order on Mobile and Desktop

Home Forums Support [Support request] Trying to match Flex order on Mobile and Desktop

Home Forums Support Trying to match Flex order on Mobile and Desktop

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2042210
    Alicia

    Hi!

    I need t hook after branding and before the Mobile toggle button.

    Is there a way to do this?

    #2042336
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site where i can see the layout

    #2042903
    Alicia

    Hi David!

    Here’s the link:

    http://staging12.sandbox.intrepidrealist.com/sacred-lomi/event/

    I’m trying to replicate the tabbing order I have on desktop. It’s better for accessibility to tab in this order:

    1. logo
    2. search
    3. cart
    4. navigation

    I’ve hooked the cart in before navigation.

    I’ve got it working on Desktop, but not on mobile. Perhaps it’s one of my media queries. Been banging my head over this for far too long!

    Thanks for any help!

    #2042975
    Ying
    Staff
    Customer Support

    Hi Alicia,

    I don’t think there’s enough room for all the elements in one row on mobile.

    Do you have an idea on how to arrange them on mobile? In to two rows?

    #2044244
    Alicia

    I have them in two rows on mobile. I want the TAB sequence to be the same.

    You can test this out by arriving at the page and then hitting the tab key. Don’t click Skip to Content, keep going through the header. You will see the focus order is: logo > search > cart > navigation

    On Mobile the sequence is: logo > navigation > search > cart.

    I want mobile to mirror desktop. I believe it maybe be the flex order?

    Or is there a way to hook a header for mobile and hook a different one for desktop?

    I really just need to hook my cart before the toggle.

    #2044263
    Elvin
    Staff
    Customer Support

    Hi there,

    It may be best to make sure your site is in Flexbox mode. (Appearance > Customize > General)

    And then try changing the hook for the search cart to generate_menu_bar_items just for the purpose of having proper wrappers.

    We then re-order using the order property. (we’ll provide the writeup once the previous things I’m mentioned are applied)

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #2044291
    Alicia

    I don’t see the option for Flexbox Mode under General:

    General Settings

    #2044315
    Elvin
    Staff
    Customer Support

    Ah that means your already using it. (the option is removed on newer version to push flexbox as the new norm)

    You can go ahead w/ changing where the search cart is hooked to generate_menu_bar_items.

    You then add this CSS to swap the ordering of the menu and the search cart.

    .menu-bar-items {
        order: 2;
    }
    
    div#primary-menu {
        order: 3;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #2046193
    Alicia

    I tried this and it’s now having the tab order:

    Logo > navigation > search > cart

    I need the search and cart to come after the logo and navigation is last.

    So, I reverted back to the way I had it.

    I need to place my search/cart between the logo and the navigation: both primary and toggle.

    Is that possible?

    #2046196
    Alicia

    Hey everyone!

    I got this to work! I hooked generate_before_header_content.

    For some reason, I assumed the logo was header content and it would how up before the logo. Well it isn’t! Yay!!

    Learn something new every day.

    I’m so happy that you guys are moving to flexbox. It’s dope!!

    #2046891
    Elvin
    Staff
    Customer Support

    Thanks for letting us know. Glad you got it sorted. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #2046942
    Alicia

    Well…

    I’m having a weird focus issue on mobile, but who’s using tab on eyephone? 🤪

    I think my best bet is to provide a skip to link to the top bar.

    Thanks so much for all the help!!

    You guys are the best in the Community! Seriously!!

    #2046996
    Elvin
    Staff
    Customer Support

    I’m having a weird focus issue on mobile

    Do you mean a :focus styling?

    but who’s using tab on eyephone?

    You can simulate it by not releasing when you tap but yes, users will rarely do that if the element is a link.

    Thanks so much for all the help!!

    You guys are the best in the Community! Seriously!!

    Thanks! we appreciate it. 😀

    Is the original issue of the topic resolved? Let us know if you need further help with it. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.