CMS Development

edobb
Member

Horizontal Drop down menu

I am trying to replicate the menu found on https://rxsafe.com/ over on our hubspot blog at https://info.rxsafe.com/blog  . Is there anyway to do this by changing out some css? I have gotten it pretty close but the drop down has be set to a fixed width which looks terrible.

I am relatively new to using hubspot and was wondering if creating a custom menu is feesible and wondered if anyone has some examples I can look at.

0 Upvotes
3 Replies 3
Jsum
Key Advisor

Horizontal Drop down menu

Hi @edobb ,

 

Taking a look at your blog navigation, there are a few things that need to be done. 

 

1. You need to remove position: relative; from the parent <li> of the child <ul>. Change it to position: static in your css. You don't want to position your child list to the parent <li>, you want to position the child list to the parent <ul>.

 

2. Give the parent <ul> position: relative;

 

3. Give the child list <ul> left: 0 !important; and right: 0;. Messing with your page css, from some reason the left attribute won't take effect on the element unless you use an !important tag. that isn't necessary for the right attribute.

 

4. This will get the child list <ul> to stretch like on the main site. after this you just need to space the child list's list items out evenly, which I am sure you won't have any trouble with. 

sharonlicari
Community Manager
Community Manager

Horizontal Drop down menu

Hey @edobb 

 

I apologize for the delay response! really appreciate all the information provided, this is really helpful for the community to assist you. 

 

I am going to tag some of CMS experts to assist you with your question. @AJLaPorte and @tjoyce  would you be able to share your knowledge with @edobb?

 

Thank you

Sharon 

 

 


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Horizontal Drop down menu

Thanks @sharonlicari  -

@edobb - Good job on getting the menu this close, it's looking good.

I think what you should do is, on the child '<ul>' make this `display:flex;'

 

You might have to do some extra work to override the `display:block'` when the ul is shown on hover but, doing display flex should allow you to have even columns without forcing a width

 

---

tim@belch.io