Display the menu list alphabetically vertically instead of horizontally - Dawn theme desktop view

Hello,

Can the menu list be displayed alphabetically vertically instead of horizontally, In the Dawn theme desktop view?

www.ankitimes.com

Thank you

Well, about sorting your submenu in an alphabetical order, as far as i know, you have to do that manually by you self from the Navigation tab on your admin panel.

And about aligning your menu item vertically like this.

You need to change the CSS rule:

@media only screen and (min-width: 750px)
.header__submenu.list-menu li {
width: calc(100%/2);
display: inline-block;
}

To the following:

@media only screen and (min-width: 750px)

.header__submenu.list-menu li {
width: 100%;
display: block;
}

But there will be a usability issue, Incase the screen height is less than the menu height, a bottom portion of the menu will be hidden outside the visitor’s visible part of the screen.

Have a good one.

Thank you for your response, but I want two columns to remain and be arranged alphabetically vertically and not horizontally.

Would you elaborate more? A screenshot or a visual guide would be more helpful to understand your need.

Now it’s like this:

I want it to be like this:

And only in desktop view.
Thank you

This will do the trick.

.list-menu–disclosure {
position: absolute;
min-width: 100%;
width: 20rem;
border: 1px solid rgba(var(–color-foreground), 0.2);
background-color: rgb(var(–color-background));
display: flex;
flex-direction: column;
height: 50vh;
flex-wrap: wrap;
}

Let me know if it worked.

On the desktop, it worked great. Thanks
On mobile, it is impossible to see the entire list of dogs. what can we do?

@Ann21

To make the mobile menu in 2 column.

Please add the code below to Assets > base.css file.

@media screen and (max-width: 749px) {
  ul.menu-drawer__menu.list-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 60vh;
  }
  .menu-drawer {
    width: 100% !important;
  }
}

I’m not sure that’s what you want.

Hope it helps.

Thanks.

There are more dogs listed below. Can’t see them all and can’t scroll down.

Thank you

Just scroll down (drag it up/swipe up), works fine for me. Still struggling?

There is no option to scroll down.

No need for an option, On mobile, open the menu, click on Dog Breeds, then swipe that long menu up and down.

Please look at the list of dogs.
The Toy Poodle should not be last. The Vizsla is missing. You can’t see it and you can’t scroll to it

All working fine from my side.

Take a screenshot from your own phone please

That’s very weird. It doesn’t work properly from my side.
If we reduce the space between the dogs’ breeds, it will help?

I tested it on several phones and it doesn’t work well. The Vizsla dog is missing