Navigation Bar: Drop-down Menu Alignment

Site URL: https://burgundy-carnation-bw5b.squarespace.com/

Hi all!

I am having trouble aligning the text in the drop-down menus in my navigation bar. 

I wanted the drop-down menu text to be left-aligned and used this code to achieve that:

}
.header-nav-folder-item {
    text-align: left !important;

}

HOWEVER, for some reason now that drop-down menu is way off to the left and is totally off center from it's parent folder in the navigation bar. How do I keep the drop-down menu text left aligned but make sure it is sitting DIRECTLY underneath the parent folder?

Thank you in advance!

Try adding to Home > Design > Custom CSS

a.header-nav-folder-title:hover + div, .header-nav-folder-content {
    text-align: center !important;
    position: absolute;
    left: 50% !important;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
  background: transparent !important;
}

Site URL: https://www.backspacelaser.com/

Hi, 

I'm having the same problem. 

I've used the code above which works, but for some reason it only works on the first nav link... 

On 'SHOP' the text sits too far too the right.

On 12/28/2020 at 7:48 PM, JanaH said:

Site URL: https://www.backspacelaser.com/

Hi, 

I'm having the same problem. 

I've used the code above which works, but for some reason it only works on the first nav link... 

On 'SHOP' the text sits too far too the right.

Hi. Sorry for the delay. I was off some days for the new year, Do you still need help?

I'm having a related issue, where the first two menus are left-aligned, then the last menu is right-aligned for some reason?

I'd appreciate any insight! 

On 2/12/2021 at 6:30 AM, zlinekitchen said:

I'm having a related issue, where the first two menus are left-aligned, then the last menu is right-aligned for some reason?

I'd appreciate any insight! 

Can you share site url?

Thank you for the code, I played with the %'s a little and my drop down is now located where I want it  also changed background to white so the drop down did not get lost in the websites text.  Thank you for posting the basic code 

Will this work for the navigation menu in the shop? I have a code for a navigation menu on the category pages in the shop. But I have trouble aligning the Prints section which has a dropdown menu and is pushing everything around.

The images were wrong. Here are the right ones.

On 11/10/2021 at 3:28 PM, puslingpaahaender said:

The images were wrong. Here are the right ones.

What is your site url?

4 hours ago, tuanphan said:

What is your site url?

Hello tuanphan. I was reaching out on another site/question with the same trouble. You just answered there😊. It didn't solve the issue unfortunately. And I thought that a solution similar to that of the nav header and changing position of drop down might do the trick. 

If you'd like to take a look my url is

www.storiesofsmallthings.com 

12345julia

I'd very much appreciate it.  thank you!

On 11/12/2021 at 5:19 PM, puslingpaahaender said:

Hello tuanphan. I was reaching out on another site/question with the same trouble. You just answered there😊. It didn't solve the issue unfortunately. And I thought that a solution similar to that of the nav header and changing position of drop down might do the trick. 

If you'd like to take a look my url is

www.storiesofsmallthings.com 

12345julia

I'd very much appreciate it.  thank you!

Just answered.

a.header-nav-folder-title:hover + div,
.header-nav-folder-content {
    text-align: left !important;
    position: absolute;
    left: 0 !important;
    right: unset !important;
    -webkit-transform: translateX(0) !important;
    -o-transform: translateX(0) !important;
    transform: translateX(0) !important;
    background: transparent !important;
}

This makes everything sorted and solved for all kind of navigation menus.

On 5/30/2020 at 12:58 AM, Sark said:

Site URL: https://burgundy-carnation-bw5b.squarespace.com/

Hi all!

I am having trouble aligning the text in the drop-down menus in my navigation bar. 

I wanted the drop-down menu text to be left-aligned and used this code to achieve that:

}
.header-nav-folder-item {
    text-align: left !important;

}

HOWEVER, for some reason now that drop-down menu is way off to the left and is totally off center from it's parent folder in the navigation bar. How do I keep the drop-down menu text left aligned but make sure it is sitting DIRECTLY underneath the parent folder?

Thank you in advance!

On 12/28/2020 at 6:18 PM, JanaH said:

Site URL: https://www.backspacelaser.com/

Hi, 

I'm having the same problem. 

I've used the code above which works, but for some reason it only works on the first nav link... 

On 'SHOP' the text sits too far too the right.

a.header-nav-folder-title:hover + div,
.header-nav-folder-content {
    text-align: left !important;
    position: absolute;
    left: 0 !important;
    right: unset !important;
    -webkit-transform: translateX(0) !important;
    -o-transform: translateX(0) !important;
    transform: translateX(0) !important;
    background: transparent !important;
}

This will help you for sure.

Hello! 

This code was SUPER helpful – thank you!!

Because I'm using a vertical navbar however, the submenu text is overlaying the remaining menu text when it drops down upon hover over or clicking on. Would you be able to help me with code (for SQSP 7.1) to push the rest of the menu down, to allow space for the drop-down menu?

In advance, much much appreciated!

On 1/4/2024 at 9:08 AM, aevesam said:

Hello! 

This code was SUPER helpful – thank you!!

Because I'm using a vertical navbar however, the submenu text is overlaying the remaining menu text when it drops down upon hover over or clicking on. Would you be able to help me with code (for SQSP 7.1) to push the rest of the menu down, to allow space for the drop-down menu?

In advance, much much appreciated!

Can you share site url? We can check this easier

On 1/4/2024 at 7:38 AM, aevesam said:

Hello! 

This code was SUPER helpful – thank you!!

Because I'm using a vertical navbar however, the submenu text is overlaying the remaining menu text when it drops down upon hover over or clicking on. Would you be able to help me with code (for SQSP 7.1) to push the rest of the menu down, to allow space for the drop-down menu?

In advance, much much appreciated!

Share website url pls?

Hi, could you provide me with the code to make the drop down center aligned? My client is insisting on having it this way

On 2/7/2024 at 4:29 AM, buzzsites said:

Hi, could you provide me with the code to make the drop down center aligned? My client is insisting on having it this way

 

 

You can use #7