Mobile Vertical Menu Issues - Last Child Formatting

Highlighted
New Contributor

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:

CSS.PNG

 

Here's the other menu list item formatting:css 2.PNG

 

What can I do to format my mobile menu? 

Mobile menu.PNG

4 Replies
Community Manager

Hi @mmeisenheimer,

 

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

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
New Contributor

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

Reply
0 Upvotes
Advisor | Platinum Partner

@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

dennis
Regular Contributor

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.

Reply
0 Upvotes