CMS Development

mmeisenheimer
Member

Mobile Vertical Menu Issues - Last Child Formatting

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 4
jennysowyrda
Community Manager
Community Manager

Mobile Vertical Menu Issues - Last Child Formatting

Hi @mmeisenheimer,

 

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

 

Thanks,
Jenny

0 Upvotes
mmeisenheimer
Member

Mobile Vertical Menu Issues - Last Child Formatting

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

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Mobile Vertical Menu Issues - Last Child Formatting

@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
Top Contributor | Partner
Top Contributor | Partner

Mobile Vertical Menu Issues - Last Child Formatting

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.

0 Upvotes