topic Re: Header menu resizing issues in CMS Development

Header menu resizing issues

Geogrow — Mon, 10 Feb 2025 12:49:57 GMT

I am having some issues with our header.

when full screen the sizing and location of the font on the menu is perfect. When i start to shrink the size of the page it automatically shrinks the text when it gets to a certain size.

I have been trying to play around with settings in the CSS and as I am only a novice, I am finding it difficult to understand.

I would like to make it bigger when the page gets smaller.

here is a link to the website: https://www.geogrow.com/

TIA

Re: Header menu resizing issues

SteveHTM — Mon, 10 Feb 2025 21:52:25 GMT

@Geogrow - I presume this is a Content hub based site? You need to be looking at the theme setup withing which your site is developed. The theme modules likely contain all the CSS used for the menu system behavior, but it often looks pretty complex. Support should be available from whoever put the theme togther.

Hope this helps.

Steve

Re: Header menu resizing issues

BarryGrennan — Wed, 12 Feb 2025 10:24:19 GMT

The css rule that's shrinking your text is:

.custom-menu-wrapper .level-1>li:nth-of-type(n)>a { font-size: 14px; padding: 10px; }

It's inside a media query:

@media (max-width: 1750px) and (min-width: 768px) { }

It's loading on page via you're main.css file

However main.css files in hubspot typically compile various other css files, so hve a look in some other files, maybe a typography.css or maybe headers.css. The specific location will depend on your theme.

Your font size on larger screens is set with thise piece of css:

.custom-menu-wrapper .level-1>li>a { display: block; font-family: Zain, serif; font-size: 24px; }

so you could either match the font size used here withith the media query, or simply remove the rule within the media query assuming it doesn't affect anything else.

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Re: Header menu resizing issues

Geogrow — Mon, 17 Feb 2025 10:20:16 GMT

Worked like a charm! Thank you for your help

Re: Header menu resizing issues

Geogrow — Tue, 22 Apr 2025 15:21:42 GMT

I have been having an isue with our website today where, once in mobile view, we lose the icon for the menu. It is still clickable in the far right corner of the header, but not visible.

I happens when it changes from 768px and below.

I have had a look at the CSS and can't figure it out. To be honest, I am not entirely sure what I am looking for.

If anyone can help me that would be fab

website is https://www.geogrow.com/