Justify links in navigation drop down.

Solved
Aivly
New Member
5 0 0

Aivly_0-1619013024038.png

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

 

0 Likes
Natztech
Shopify Partner
597 152 366

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

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Aivly
New Member
5 0 0

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.

0 Likes
Natztech
Shopify Partner
597 152 366

@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;
  }
}
   

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Aivly
New Member
5 0 0

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

Kind regards

 

0 Likes
Natztech
Shopify Partner
597 152 366

This is an accepted solution.

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%  ;
  }
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Aivly
New Member
5 0 0

Thank you for all your help!

0 Likes