Drop down navigation formats

Site URL: https://www.bifolddoorstore.co.uk/

Hi

Does anyone know if its possible to format your navigation drop down menus like the following rather than having an endless liniar list?

Thanks in advance 

You mean make dropdown items on multi columns?

Add to Design > Custom CSS

.header-nav-folder-content {
    column-count: 2;
}

On 1/7/2022 at 9:52 PM, tuanphan said:

You mean make dropdown items on multi columns?

Add to Design > Custom CSS

.header-nav-folder-content {
    column-count: 2;
}

 

This seems to only split the columns up evenly. What if we want the column to start on an earlier/later link?

On 2/4/2022 at 10:21 PM, justaguywhodoesthings said:

This seems to only split the columns up evenly. What if we want the column to start on an earlier/later link?

You can consider using a mega menu plugin

On 2/8/2022 at 6:46 AM, tuanphan said:

You can consider using a mega menu plugin

We're definitely considering this. Is it possible for you to help me on this within this thread?:

Right now I have this code, which puts all the links with a padding and sets to normal width:

.header-nav-folder-item.header-nav-folder-item--external {
    font-size: 20px!important;
    font-weight: normal!important;
    padding: 0em 1.5em!important;
  }

This is a preview of the "Destinations" drop down menu:

This is exactly what I'm looking to do. However, I'd like to just style the links like this only within "Destinations" and not within "Resources" or any other folder that has links.

On 2/14/2022 at 10:24 PM, justaguywhodoesthings said:

We're definitely considering this. Is it possible for you to help me on this within this thread?:

Right now I have this code, which puts all the links with a padding and sets to normal width:

.header-nav-folder-item.header-nav-folder-item--external {
    font-size: 20px!important;
    font-weight: normal!important;
    padding: 0em 1.5em!important;
  }

This is a preview of the "Destinations" drop down menu:

This is exactly what I'm looking to do. However, I'd like to just style the links like this only within "Destinations" and not within "Resources" or any other folder that has links.

Hi,

What is your site url? I checked all comments & dont see url to check

On 2/19/2022 at 2:41 AM, tuanphan said:

Hi,

What is your site url? I checked all comments & dont see url to check

Hi there,

site: https://unchartedtrvl.squarespace.com/

pass: unchartedtravel

On 2/26/2022 at 10:30 AM, justaguywhodoesthings said:

Hi there,

site: https://unchartedtrvl.squarespace.com/

pass: unchartedtravel

Incorrect password. Can you check it again?

On 3/1/2022 at 2:50 AM, justaguywhodoesthings said:

pw: 04April2014

Thank you

Hi. Still incorrect

On 3/3/2022 at 7:34 AM, tuanphan said:

Hi. Still incorrect

I apologize, I'm having issues with website owner's communications. Try "UTS2022"

On 3/4/2022 at 10:10 PM, justaguywhodoesthings said:

I apologize, I'm having issues with website owner's communications. Try "UTS2022"

Change this code

.header-nav-folder-item.header-nav-folder-item--external {
    font-size: 20px!important;
    font-weight: normal!important;
    padding: 0em 1.5em!important;
  }

to this

a.header-nav-folder-title[href="/destinations"] + div.header-nav-folder-content .header-nav-folder-item--external {
    font-size: 20px !important;
    font-weight: normal !important;
    padding: 0em 1.5em !important;
}

On 3/6/2022 at 8:20 AM, tuanphan said:

Change this code

.header-nav-folder-item.header-nav-folder-item--external {
    font-size: 20px!important;
    font-weight: normal!important;
    padding: 0em 1.5em!important;
  }

to this

a.header-nav-folder-title[href="/destinations"] + div.header-nav-folder-content .header-nav-folder-item--external {
    font-size: 20px !important;
    font-weight: normal !important;
    padding: 0em 1.5em !important;
}

 

I appreciate you! Unfortunately, it is not working for me.

This is the entire code:

/* Nav design */
.header-title-nav-wrapper {
    flex: 1 0 75%!important;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}
[href="/destinations"]+.header-nav-folder-content {
      columns: 3 !important;
      width: auto !important;
     display: absolute !important;
    width: auto !important;
}
.header-nav-folder-content{
  background-color:rgba(255,255,255,0.98)!important}

.header-nav-folder-content a {
  padding-bottom:0.1em!important;
  padding-top:0.3em!important}

.header-nav-folder-content{
  border: 1px solid #1b6fc1}

.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 20px!important;
 .header-nav-folder-item {
    font-weight: bold!important;
    padding: 0em 1em!important;
  }
  .header-nav-folder-item {
    font-size: 19px;
  }
.header-nav-folder-item:hover {
    background: #1470af!important;
    a {color: #fff!important;}
  }
a.header-nav-folder-title[href="/destinations"] + div.header-nav-folder-content .header-nav-folder-item--external {
    font-size: 20px !important;
    font-weight: normal !important;
    padding: 0em 1.5em !important;
}
  }