CMS Development

jenny918
Member

Help with Dropdown Menu Design

We are in-between web designers right now and I need help making a drop down menu look better. See the photo below. I created a drop down menu at the top of our site under "Patient Portal" and the options are showing up staggered and with a transparent background so they get totally lost. It just looks sloppy. Can anyone help me with some suggestions / code to make this look cleaner? Thanks!Screen Shot 2019-02-25 at 10.00.09 AM.png

0 Upvotes
3 Replies 3
jzilch
HubSpot Employee
HubSpot Employee

Help with Dropdown Menu Design

Hi, 

 

I took a look and hopefully the below CSS will help get you started with some of the styling. You can add this CSS to your main stylesheet that is attached in your template. 

 

.main-header .hs-menu-wrapper > ul ul {
  background-color: #fff;
  padding: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  position: relative;
  z-index: 20;
}

This should add some additional base styles such as a white background color and the box-shadow for the dropdown. The box shadow helps as the rest of the menu is on a white background too so this will help to give the dropdown section a bit more depth. 

 

Another item in which I would change it on the class below. 

.main-navigation

This class adds a very high z-index and this is makes the dropdown for your patient portal appear behind the the blue navigation you also have on the page. 

 

@media (min-width: 768px)
.main-navigation {
  position: relative;
  box-shadow: rgba(0,0,0,.15) 0px 2px 1px 0px;
  z-index: 9999;
  border-top: rgba(169,195,152,.5) 1px solid;
}

I would change the z-index to 12 instead of 9999 this should help with the stacking of the menus. I included the full code below but this should already be in your stylesheet so you will only need to udpate the z-index on the above selector. 

 

@media (min-width: 768px)
.main-navigation {
  position: relative;
  box-shadow: rgba(0,0,0,.15) 0px 2px 1px 0px;
  z-index: 12;
  border-top: rgba(169,195,152,.5) 1px solid;
}

 

 

 

 

 

 

 

 

 

 

jenny918
Member

Help with Dropdown Menu Design

Thank you so much for your response. For someone who has no experience coding and is a little nervous making these changes myself, is there a simpler solution you could recommendation? Or does Hubspot offer any resources for companies that use your platform for our website?

0 Upvotes
jzilch
HubSpot Employee
HubSpot Employee

Help with Dropdown Menu Design

Hi, 

 

While there wouldn't be any simpler solution in using the CMS as there is not a way currently in the editor to add the necessary styles for this part of the menu. I would recommend onthebench.io as another solution. This will connect you to developers who currently work in the HubSpot CMS and would be able to help you further implement the styles you're looking for. 

0 Upvotes