How can I alphabetically justify links in a dropdown navigation bar?

Technical Q&A
1

Aivly_0-1619013024038.png
Aivly_0-1619013024038.png966×842 35.6 KB

Hello there,

I need to justify these links that are part of a drop down menu in the main navigation bar. Preferably so they exist in three columns in alphabetical order. Can anyone help?

Kind Regards

2

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

3

https://aivly-country-store.myshopify.com

aofowp - password

The problem of justifying the links in the navigation drop down is under ‘shop by brand’ in the main nav bar.

Many thanks.

4

@Aivly please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. http://prnt.sc/11t6af3

@media only screen and (min-width: 729px){
#AccessibleNav #SiteNav .site-nav--has-dropdown  .brand-drop {
   width: auto%  ;
  }

 #AccessibleNav #SiteNav .site-nav--has-dropdown  .site-nav__dropdown >ul{
    display: grid !important;
    grid-gap: 3px !important;
    grid-template-columns: auto auto auto auto !important;
    grid-template-rows: 10% 10% !important;
  }
}
5

Hello,

Thank you for all your help! This is exactly how I wished for it to look. However the drop down (white area) doesn’t seem to be covering the last links so it’s unreadable.

I am using a Mac OSX, whether that would make a difference, I’m not sure.

Aivly_0-1619022599633.png
Aivly_0-1619022599633.png1318×842 174 KB

Kind regards

6

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 729px){
#AccessibleNav #SiteNav .site-nav--has-dropdown  .brand-drop {
   width: auto%  ;
  }
}
7

Thank you for all your help!