Add horizontal scrolling menu to mobile header - Support | Kriesi.at

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

Author

Posts
February 15, 2022 at 5:31 pm #1340754

AnnemarieDoolin
Participant

Hi Genius’
A client has requested a change to the mobile layout (see before and after mockup image) and I don’t know whether I need to tell her that it’s a 100% developer job or whether there is any part you brilliant people can help me with??

1. She wants to rearrange the 3 items on the mobile header as they are now so it displays burger icon, then logo and then search icon to the far right.
2. She wants to add her desktop menu as a horizontal scrolling menu underneath (as Amazon.com has on their mobile view).

Any tips would be most appreciated!!
— Annemarie

February 16, 2022 at 7:17 am #1340851
Ismael
Moderator
Hey Annemarie,

Thank you for the inquiry.

This is possible but after the modification, the users will not be able to click on the logo because the main menu and the search icon container will cover it. If that is fine, then you can use this css code.
```
@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .main_menu {
    left: 0;
    right: auto;
    width: 100%;
  }

  .responsive #top .av-logo-container .avia-menu {
    height: 100%;
    width: 100%;
  }

  #top #menu-item-search {
    float: right;
  }

  .responsive #top #header_main>.container .main_menu .av-main-nav>li>a {
    padding: 0;
  }

  .responsive #top .logo {
    float: right;
  }
}
```
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael
February 16, 2022 at 12:41 pm #1340901

AnnemarieDoolin
Participant

Wow Ismael that was fast, you’re a wizard looks super!! Any idea how I get the main desktop menu underneath as a scrolling menu?

Best wishes,
Annemarie

February 16, 2022 at 3:00 pm #1340913
Guenni007
Participant
To be honest, I don’t think Amazon’s implementation is a success. The hamburger menu is a separate menu item and not a copy of the text menu.
The page has nothing to do with responsive design. Here you have to scroll right and left to see the content, as in the past in the frame / table layout aera.

…
- This reply was modified 2 years, 9 months ago by Guenni007.
February 17, 2022 at 3:58 am #1341023

Ismael
Moderator

Hi,

Any idea how I get the main desktop menu underneath as a scrolling menu?

That option is not available and adding such option will require significant amount of modifications. Unfortunately, this is beyond the scope of support. You may need to look for a menu plugin or hire a freelance developer to customize the menu further.

Best regards,
Ismael

February 17, 2022 at 11:07 am #1341088

AnnemarieDoolin
Participant

THANKS Ismael for the clarification, I suspected that’s the case but sometimes no matter what you say to a client they insist they want something. Hopefully it’s enough to help the client realise that it’s really not necessary!

February 18, 2022 at 5:56 am #1341274

Ismael
Moderator

Hi,

Yes, that should be enough, and as @Guenni007 pointed out above the Amazon menu is not really that intuitive and the site would be better off with a simple menu.

Thank you for your patience.

Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.