Hola! ¡Tenemos nuestra Comunidad en Español!

Navigation CSS help for Startup Starter Kit

resolver
Highlighted
Colaborador ocasional

I downloaded the Startup Start Kit (https://app.hubspot.com/marketplace/2275467/products/inboundpixels/startup-starter-kit) from the Marketplace to use for our event webpage (live.xyplanningnetwork.com).

 

The navigation CSS includes a parameter to make the last option in the navigation appear as a button.

Startup Starter Kit Top Navigation.png

 

 

This is the code:

.navbar .last li:last-of-type a {
display: inline-block;
line-height: 40px;
font-size: 14px;
font-weight: 500;
padding: 0 20px;
color: {{ colorText }};}

 

We want to keep this for the top-level navigation; however, we would like to add secondary navigation. When we do this, it is applying the last link class and making the last option in the secondary drop down:

 

Startup Starter Kit Secondary Nav.gif

 

I attempted to contact Inbound Pixels (the template creator) but have not gotten a response. 

 

Can someone help me with CSS to keep the primary navigation as it appears today, but not apply the "last-of-type" treatment to the secondary navigation?

 

Thank you!

 

Katie

Responder
0 Me gusta
1 Soluciones aceptada

Soluciones aceptadas
Asesor

Thanks.  This should be an easy fix to implement.  In the starter.min.css file that has the CSS statement we are looking at change:

 

li:last-of-type

to

li.hs-menu-depth-1:last-of-type

 

Then only the top level menu depth will have the green button at the end of the menu and subsequent levels of your drop-down will be excluded from the statement.

Responder
0 Me gusta
4 Respuestas 4
Asesor

I looked at the link you posted, but that link doesn't appear to have the drop down menus. What you are going to have to do is update that statement to be more specific to only target the top-level li items.  Can you post an example with the drop down so we can more specific with assistance?

Colaborador ocasional

@Ben_M - thanks for your reply. Since the site is live I had removed the secondary navigation until I could get it working the way I wanted.

 

I cloned the home page and template files for testing purposes, and then added the secondary navigation on the testing page. It's not published but if I give you the preview URL can you access: https://live.xyplanningnetwork.com/test?hs_preview=sfMuJtVP-22916132175

 

If you hover over the Schedule top-level navigation, you can see the secondary nav drop down. 

 

Screen Recording 2019-12-05 at 01.56 PM.gif

 

Thank you!

 

Katie

Responder
0 Me gusta
Asesor

Thanks.  This should be an easy fix to implement.  In the starter.min.css file that has the CSS statement we are looking at change:

 

li:last-of-type

to

li.hs-menu-depth-1:last-of-type

 

Then only the top level menu depth will have the green button at the end of the menu and subsequent levels of your drop-down will be excluded from the statement.

Responder
0 Me gusta
Colaborador ocasional

This is exactly what I needed. Thanks @Ben_M !

Responder
0 Me gusta