Dropdown Menu Alignment is off

I am working on a site and I am having trouble having the dropdown menu align correctly when it opens. I was told if my navigation bar is adjusted to the right, this is what happens. I have changed the navigation bar position, such as to the left or center, and the dropdown menu works fine, but if adjusted to the right, it does not. Is there a code that I could use to correct this? Thank you!

Can you share site url? We can check easier.

https://rosajosies.squarespace.com/     dcookdesigns

This is the code I used to align the drop down menu text on my site, align the nav bar the way you need it to be then add the code to custom css, you can change it to right or center if you wish. 

#topNav .main-nav .folder-, 

collection .subnav ul { text-align:

left;
 }
 

My Random Views

thank you!

It didn't work for me....

Give it a try again my copy to the post may have changed something, and that includes spaces. 

#topNav .main-nav .folder-collection .subnav ul { text-align: left;
 }

7 hours ago, derricksrandomviews said:

Give it a try again my copy to the post may have changed something, and that includes spaces. 

#topNav .main-nav .folder-collection .subnav ul { text-align: left;
 }

I think above site is 7.1, your code for 7.0

16 hours ago, blix said:

It didn't work for me....

Incorrect password.

I thought that might be the case, 7.1 not 7.0. 

Sorry about that. Here you go!

https://rosajosies.squarespace.com/

blix0522   this should work. 

I found this code for 7.1 drop down menus, once again change it to right or left. 

//-----dropdown menu alignment-----
.header-nav-folder-item {
    text-align: left !important;

}

I will give it try and report back:) Thank you!

no change, and I tried, left, right and center just for the heck of it. Nada.

Add to Home > Design > Custom CSS

/* Center dropdown */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%);
}

Thank you so much. It's finally working correctly. I appreciate everyone's help in resolving this glitch! 

Jeanette

Hello, my navigation dropdown is perfect however one small request. My blue box is a little high and almost touching the text navigation. Could you tell me what I can insert in this code to drop it a little?

/* Center dropdown */
.header-nav-folder-content {
  left: 50% !important;
  transform: translateX(-50%);
  text-align: center!important;
  width: 90px!important;
}
 

Thank you so much, Jeanette (7.1)

Quote

top: 20px !important;

Thank you, I was going to try something like that, so I guess I am learning!

Old thread....but follow up question:

That code worked to align one navigation dropdown menu, but not the second. How do I assign them different alignments? I want both dropdown menus to be under the "Shop+" category

22 hours ago, hartley said:

Old thread....but follow up question:

That code worked to align one navigation dropdown menu, but not the second. How do I assign them different alignments? I want both dropdown menus to be under the "Shop+" category

 

Hi. What is your site url? We can check easier

@tuanphanURL is https://www.heroncabinetry.com/

Im okay with the drop down menu coming from the left for both navigation titles, but i was hoping to move it slightly to the right so the green edge from the dropdown menu matches the black left edge of the "Shop" button. I also want to move the drop down menu down a tiny bit so it hits the bottom edge of the "Shop" button. Shown in the example, I've also included my custom CSS for the header:

6 hours ago, hartley said:

@tuanphanURL is https://www.heroncabinetry.com/

Im okay with the drop down menu coming from the left for both navigation titles, but i was hoping to move it slightly to the right so the green edge from the dropdown menu matches the black left edge of the "Shop" button. I also want to move the drop down menu down a tiny bit so it hits the bottom edge of the "Shop" button. Shown in the example, I've also included my custom CSS for the header:

  

Don't remove any code in your current code. Add this to Design > Custom CSS

.header-nav-item.header-nav-item--folder {
    position: relative !important;
}
.header-nav-folder-content {
    left: 0 !important;
}

@tuanphanthat worked perfectly! thank you! Now do you know how I would lower the dropdown menu box so it doesn't cover any of the black "Shop" button?

3 hours ago, hartley said:

@tuanphanthat worked perfectly! thank you! Now do you know how I would lower the dropdown menu box so it doesn't cover any of the black "Shop" button?

Add margin-top

.header-nav-folder-content {
    left: 0 !important;
    margin-top: 10px;
}