Header menu resizing issues

[Geogrow]

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

[BarryGrennan · Accepted solution]

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

[Geogrow]

Worked like a charm! Thank you for your help

[SteveHTM]

@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