CMS Development

pjbovee
Participant

Child Menu Overflow

SOLVE

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
jonchim
Solution
Guide | Diamond Partner
Guide | Diamond Partner

Child Menu Overflow

SOLVE

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
VP of Design & Development
Hypha HubSpot Development


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
jonchim
Solution
Guide | Diamond Partner
Guide | Diamond Partner

Child Menu Overflow

SOLVE

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
VP of Design & Development
Hypha HubSpot Development


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

Child Menu Overflow

SOLVE

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

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Child Menu Overflow

SOLVE

Hey @pjbovee 

Thanks for providing the links!

I think @jonchim could probably help you out here!