CMS Development

mollycarroll
Member

Styling module groups

SOLVE

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!

0 Upvotes
1 Accepted solution
mollycarroll
Solution
Member

Styling module groups

SOLVE

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

View solution in original post

0 Upvotes
2 Replies 2
jennysowyrda
Community Manager
Community Manager

Styling module groups

SOLVE

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

0 Upvotes
mollycarroll
Solution
Member

Styling module groups

SOLVE

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

0 Upvotes