Styling module groups

Develop, Build & Integrate CMS Development
1

Hello, I’m trying to style our website’s horizontal menu in a new template. I created a module group to house the menu as I want the ul menu links to be spaced out evenly across the page.

I know HubSpot’s CMS CSS is a responsive grid layout, so I’m assuming I use grid styling properties. Do I need to declare display:grid anywhere, like in my custom module group? I assumed not, but I’m having issues with the menu spacing.

Another question, do I even need a module group to house only my menu? If not, how do I space the ul links evenly across the page? Currently they’re aligned to the left, but do not stretch across like I want.

I have most of my styling in the ul a (link list) class provided by HubSpot, as you can see below. Not sure if it may show where I’m going wrong.

.hs-menu-wrapper.hs-menu-flow-horizontal ul li a{
border: 1px solid #10375b;
border-radius: 4px;
background-color: #10375b;
margin: 5px;
transition: 0.3s;
color: #ffffff;
font-family: Open Sans, sans-serif;
font-size: 10px;
font-weight: 50%;
text-transform: uppercase;
overflow: visible !important;
max-width: none !important;
width: auto !important;
}

New to CSS within HubSpot, any insight/help is appreciated, thanks!

2

Hi @mollycarroll,

Can you share a link to the page you’re working on?

Additionally, do you mind sharing what you would like the page to look like vs. what it looks like now, and any steps you’ve tried in resolving the issue.

The more screenshots, details and information you can provide, the better the Community can assist.

Thanks,

Jenny

3

Hi Jenny, I actually ended up figuring this out on my own, but thanks for the tips for next time!