La communauté HubSpot est disponible en français.

Navigation CSS help for Startup Starter Kit

Résolue
Highlighted
Contributeur occasionnel

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

Répondre
0 Vote / Votes
Solution acceptée / Solutions acceptées

Solutions approuvées
Conseiller

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.

Répondre
0 Vote / Votes
4 RÉPONSES 4
Conseiller

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?

Contributeur occasionnel

@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

Répondre
0 Vote / Votes
Conseiller

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.

Répondre
0 Vote / Votes
Contributeur occasionnel

This is exactly what I needed. Thanks @Ben_M !

Répondre
0 Vote / Votes