Jump to content

change alignment of dropdown navigation and text links

Go to solution Solved by tuanphan,

Recommended Posts

Hello all,

I've found posts that address this issue in 7.1, but I am on 7.0 York/Jasper template and can't find a solution.

I'm trying to change the alignment of dropdown folders in my main navigation.

Currently, the dropdown folders align with the left of the folder name, and the text links are left-justified within it.  I would like to have the folder align with the right of the folder name, and have the text links within be right-justified.

Why I want this: my right-most navigation menu item is a dropdown, and it hangs off the page at certain smaller sizes (see pic).

Untitled.png

Link to comment
  • Replies 6
  • Views 691
  • Created
  • Last Reply

Top Posters In This Topic

Thanks for your reply and for this code, which works! How would I edit this to have the "Series" dropdown align in this manner as well, in addition to the "About" dropdown? And how can I get the text links inside each dropdown to align to the right of the dropdown box rather than the left?

Link to comment
  • Solution
21 hours ago, robinmandel said:

Thanks for your reply and for this code, which works! How would I edit this to have the "Series" dropdown align in this manner as well, in addition to the "About" dropdown? And how can I get the text links inside each dropdown to align to the right of the dropdown box rather than the left?

You can remove :last-child from the code

div.nav-item.folder .subnav {
    margin-left: -70px !important;
}
div.nav-item.folder .subnav * {
    text-align: right !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.