Child Menu Overflow

SOLVE
pjbovee
Participant

Hey everyone,

 

I'm imagining this is a quick fix for most of you, but I know just enough to get myself into a tiny bit of trouble and (usually) find my way out. This one just has me stumped.

 

We sort of mix and match pages on our site between our main Squarespace-built site and HubSpot pages/landers/blogs. We recently added a drop-down menu on the last item of our navigation: www.angelsfoster.org

 

There are 2 items under Give: Giving Overview and Leave a Legacy.

 

On Squarespace, the new child menu was too long and getting cut off on the right, so I did a quick search and found this code to drop in:

 

[href="/give"]+.Header-nav-folder {
left: -150% !important;
}

 

For our replicated HubSpot nav menu, though, I can't – for the life of me – figure out how to shift JUST that one child menu (I don't want the ones under About or Events to shift). Here is a link to one of our HubSpot pages: https://blog.angelsfoster.org/blog

 

I figured out how to shift all of the child menus, but not ONLY the one under Give. I just can't figure out how to target only that one.

 

Any help you can provide is so appreciated!

 

Cheers,

PJ

0 Upvotes
1 Accepted solution

Accepted Solutions
jonchim
Solution
Top Contributor | Diamond Partner

Hey @pjbovee,

 

You'll need to use the parent in order to target that specific <ul> menu children wrapper.

It looks like those top level menu items have custom class names based on the menu name in your case on the hubspot site it is "Give", so you can use left to adjust it however far you want it to go to match the squarespace site. The parent already has a position: relative; so this is all you'll need below. And if the navigation didn't have a custom class name you can use nth-child to target just the last menu item.  But the below should do the trick. Let me know if you run into any ius

 

.Give .hs-menu-children-wrapper {
    left: -170px !important;
}






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

3 Replies 3
dennisedson
Community Manager

Hey @pjbovee 

Thanks for providing the links!

I think @jonchim could probably help you out here!

Thanks,

Dennis


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!
jonchim
Solution
Top Contributor | Diamond Partner

Hey @pjbovee,

 

You'll need to use the parent in order to target that specific <ul> menu children wrapper.

It looks like those top level menu items have custom class names based on the menu name in your case on the hubspot site it is "Give", so you can use left to adjust it however far you want it to go to match the squarespace site. The parent already has a position: relative; so this is all you'll need below. And if the navigation didn't have a custom class name you can use nth-child to target just the last menu item.  But the below should do the trick. Let me know if you run into any ius

 

.Give .hs-menu-children-wrapper {
    left: -170px !important;
}






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

pjbovee
Participant

This is great, @jonchim! Thank you for your help!

0 Upvotes