topic Re: Navigation CSS help for Startup Starter Kit in Startups

Navigation CSS help for Startup Starter Kit

kdemars — Mon, 02 Dec 2019 18:39:28 GMT

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.

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:

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

Re: Navigation CSS help for Startup Starter Kit

Ben_M — Mon, 02 Dec 2019 23:50:48 GMT

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?

Re: Navigation CSS help for Startup Starter Kit

kdemars — Thu, 05 Dec 2019 19:57:50 GMT

@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.

Thank you!

Katie

Re: Navigation CSS help for Startup Starter Kit

Ben_M — Thu, 05 Dec 2019 21:44:13 GMT

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

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.

Re: Navigation CSS help for Startup Starter Kit

kdemars — Thu, 05 Dec 2019 23:33:16 GMT

This is exactly what I needed. Thanks @Ben_M !