Startups

kdemars
Participant

Navigation CSS help for Startup Starter Kit

SOLVE

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

0 Upvotes
1 Accepted solution
Ben_M
Solution
Key Advisor

Navigation CSS help for Startup Starter Kit

SOLVE

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.

View solution in original post

4 Replies 4
Ben_M
Key Advisor

Navigation CSS help for Startup Starter Kit

SOLVE

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?

kdemars
Participant

Navigation CSS help for Startup Starter Kit

SOLVE

@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

0 Upvotes
Ben_M
Solution
Key Advisor

Navigation CSS help for Startup Starter Kit

SOLVE

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.

kdemars
Participant

Navigation CSS help for Startup Starter Kit

SOLVE

This is exactly what I needed. Thanks @Ben_M !

0 Upvotes