Horizontal Drop down menu

New Member

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.

CSS
Reply
0 Upvotes
3 Replies 3
Community Manager

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 

 

 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

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


Reply
0 Upvotes
Top Advisor | Platinum Partner

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

Esteemed Advisor | Partner

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.