Mobile Vertical Menu Issues - Last Child Formatting

[mmeisenheimer]

Hi!

I'm using a hubspot template to build a new site - however I'm having issues with the mobile menu.  I created custom styling on desktop for the last item on the menu/navigation list. When it converts to mobile, I'd like the last item to appear the same as the first three items with the only differentiation being the color. I've tried everything in the CSS media queries and can't figure it out. 

Here is the styling on the main navigation:

Here's the other menu list item formatting:

What can I do to format my mobile menu? 

[jennysowyrda]

Hi @mmeisenheimer,

Can you please share a link to your website as well so that we can take a look?

Thanks,
Jenny

[mmeisenheimer]

Hi @jennysowyrda,

I originally had custom css for the last child of the menu list - but because I was unable to change on a mobile. I omitted the last child of the last and added a CTA button instead.  Initially it was easier to modify the last child for position alignment uniformity but the CTA method works. Except in the mobile view I had to omit due to funky formatting. 

The live site is https://www.connectedbenefits.com/.  

[dennisedson]

@mmeisenheimer,

 I think it would be more useful in that menu.  Through it back in there! 

If you are having issues targeting with last-child, you could wrap the text in a span and give it a class. 

eg:

<span class="kick-butt-cta">get a quote</span>

The world is your oyster!  Style the heck out of that thing

good luck out there,

d

[JanetArmstrong]

There is a separate list of styles for mobile in hubspot themes. It should come directly after the desktop area, so keep scrolling down on the stylesheet until you see Mobile Menu.