Navigation bar text size adjustment

[SOxley]

Hi, 

I've got a Navigation bar question that I've so far not been able to get an answer to. 

I'm using the MarTech Hubspot template and would like to increase the font size of my navigation bar. I can't find a suitable option in the Global content editor or in the Themes editor. Hubspot support are on the case but 3 days in and no reply. 

I'm not a developer but can get access to a developer if changing the code is the only way.

• Has anyone had a similar problem? 
• Is it best practice to change the font size of my navigation? (It looks small and hard to read to me, but maybe it's a standard size?) 

Any advice or a link to an article with more info on this would be great. 

Thanks,

Sarah

[SOxley]

Hi @dennisedson ,

I've looked a bit further into this and the font size can be changed with the solutions suggested by @Anton but this leads me to a new and bigger problem. 

My whole website is built using one theme, Martech that isn't adjustable, which I didn't realise or understand when I started building my website. (Might be a good FYI for other none developers who join). I know need to change all my changes to a new theme without losing any of my copy, images, spacing, settings etc. 

Is there a way to do this without having to start from scratch? 

Thanks,

Sarah

[Anton]

Hi @SOxley, 

Personally I'm a big fan of creating complete custom themes but this can take a lot of time(and money).
I think the easiest solution would be to modify the fields.json file of martech(finally found it; thanks for pointing out that it's a free theme 🙂).
I will write a "guide" later today, ok?

best, 

Anton

@dennisedson - I'm not cheating 😃

[SOxley]

Hi @Anton,

I think I've learnt that custom themes are a good plan, just not something I originally knew I needed. Hence the pickle 🤣

If modifying the fields.json file saves copy and pasting all my pages to the modified theme, that would be a huge help. And a guide would be very kind of you. 

Thanks so much for the support 

[Anton · Accepted solution]

Hi @SOxley, 

I've read a few older posts - you've done everything right except for one small thing. You've modified the _default-modules.css. Almost everything what's inside the "underscoreFILENAME.css" files will be overwritten by the "theme-override.css". So you'll have two options to edit this file:

1. place the code I've posted in the first post at the very bottom of it (You'll most likely will lose the ability to change the navigation font-size in the theme-settings)
2. go the "developer route" by modifying the fields.json

as promissed - here's a "guide" how to modify the fields.json file:

Always create backups of files you're modifying. HubSpot got a good revision function but "better safe than sorry". If you don't use the CLI function simply create a new file in any Coding program(free ones: atom.io, visual studio code, sublime, brackets(soon will be implemented in Visual Studio Code)  ) or the editor(on Windows), copy/paste everything from HubSpots Design-Manager into the file, save it. 

To implement a new "function" into martech theme you'll need to make it editable by cloning it and modify following files:

• fields.json

So lets start:
To have it all organized I recommend to put the "navigation font-size" into the navigation "folder". To do this search for this part in the fields.json file(starts on line 2177):

"label": "Website header",
        "name": "header",
        "type": "group",
        "children": [
          {
            "label": "Menu",
            "name": "menu",
            "type": "group",
            "children": [
              {
                "label": "Primary",
                "name": "primary",
                "type": "group",
                "children": [
                  {
                    "label": "Font",
                    "name": "font",
                    "type": "font",
                    "inherited_value": {
                      "property_value_paths": {
                        "fallback": "theme.fonts.primary.fallback",
                        "font": "theme.fonts.primary.font",
                        "font_set": "theme.fonts.primary.font_set",
                        "size": "theme.global.typography.body_font.font.size",
                        "size_unit": "theme.global.typography.body_font.font.size_unit",
                        "variant": "theme.fonts.primary.variant"
                      }
                    },
                    "default": {
                      "color": "#FFFFFF"
                    }
                  },

and add a new font-size value to it. It should look like this:

"label": "Website header",
    "name": "header",
    "type": "group",
    "children": [
        {
        "label": "Menu",
        "name": "menu",
        "type": "group",
        "children": [
            {
            "label": "Primary",
            "name": "primary",
            "type": "group",
            "children": [
                {
                "label": "Navigation link size",
                "name": "nav_size",
                "type": "number",
                "min" : 1,
                "max" : 30,
                "step" : 1,
                "default": 16
                },{
                "label": "Font",
                "name": "font",
                "type": "font",
                "inherited_value": {
                    "property_value_paths": {
                    "fallback": "theme.fonts.primary.fallback",
                    "font": "theme.fonts.primary.font",
                    "font_set": "theme.fonts.primary.font_set",
                    "size_unit": "theme.global.typography.body_font.font.size_unit",
                    "variant": "theme.fonts.primary.variant"
                    }
                },
                "default": {
                    "color": "#FFFFFF"
                }
                },

I've added a new number option and "connected" it to the size option. Also I've deleted the "file_size" option. 

Save the file and open theme-overrides.css

changes in theme-overrides.css

the first 244 lines are containing every setting from the fields.json. Search for

/* 1m. Site Header */

{% set header_bg_color = color(theme.global.header.bg_color.color) %}
{% set header_border = theme.global.header.border.width ~ 'px' ~ ' ' ~ theme.global.header.border.style ~ ' ' ~ theme.global.header.border.color.color %}
{% set header_content_color = theme.global.header.font_color.color.color %}

{% set header_primary_nav_font = theme.global.header.menu.primary.font %}
{% set header_primary_nav_text_transform = theme.global.header.menu.primary.text_transform %}
{% set header_primary_nav_font_hover = theme.global.header.menu.primary.hover.font %}
{% set header_primary_nav_bg_color_hover = color(theme.global.header.menu.primary.hover.bg_color) %}
{% set header_primary_nav_font_active = theme.global.header.menu.primary.active.font %}
{% set header_primary_nav_bg_color_active = color(theme.global.header.menu.primary.active.bg_color) %}

{% set header_child_nav_font = theme.global.header.menu.child.font %}
{% set header_child_nav_text_transform = theme.global.header.menu.child.text_transform %}
{% set header_child_nav_font_hover = theme.global.header.menu.child.hover.font %}
{% set header_child_nav_bg_color_hover = color(theme.global.header.menu.child.hover.bg_color) %}
{% set header_child_nav_font_active = theme.global.header.menu.child.active.font %}
{% set header_child_nav_bg_color_active = color(theme.global.header.menu.child.active.bg_color) %}

(it start on line 203)

modify it like this:

/* 1m. Site Header */

{% set header_bg_color = color(theme.global.header.bg_color.color) %}
{% set header_border = theme.global.header.border.width ~ 'px' ~ ' ' ~ theme.global.header.border.style ~ ' ' ~ theme.global.header.border.color.color %}
{% set header_content_color = theme.global.header.font_color.color.color %}

{% set header_primary_nav_font = theme.global.header.menu.primary.font %}
{% set header_primary_nav_size = theme.global.header.menu.primary.nav_size ~ header_primary_nav_font.size_unit  %} {# this one takes the value you're entering in the new field #}
{% set header_primary_nav_text_transform = theme.global.header.menu.primary.text_transform %}
{% set header_primary_nav_font_hover = theme.global.header.menu.primary.hover.font %}
{% set header_primary_nav_bg_color_hover = color(theme.global.header.menu.primary.hover.bg_color) %}
{% set header_primary_nav_font_active = theme.global.header.menu.primary.active.font %}
{% set header_primary_nav_bg_color_active = color(theme.global.header.menu.primary.active.bg_color) %}

{% set header_child_nav_font = theme.global.header.menu.child.font %}
{% set header_child_nav_text_transform = theme.global.header.menu.child.text_transform %}
{% set header_child_nav_font_hover = theme.global.header.menu.child.hover.font %}
{% set header_child_nav_bg_color_hover = color(theme.global.header.menu.child.hover.bg_color) %}
{% set header_child_nav_font_active = theme.global.header.menu.child.active.font %}
{% set header_child_nav_bg_color_active = color(theme.global.header.menu.child.active.bg_color) %}

great - now you can "use" this value where ever you want/need!

now you have to place it into the correct place. To do this search for 

.header__menu .header__navigation .menu-link {
  {{ header_primary_nav_font.style }};
  color: {{ header_primary_nav_font.color }};
  font-size: {{ header_primary_nav_font.size ~ header_primary_nav_font.size_unit }};
  text-transform: {{ header_primary_nav_text_transform }};
}

and change it to this:

.header__menu .header__navigation .menu-link {
  {{ header_primary_nav_font.style }};
  color: {{ header_primary_nav_font.color }};
  font-size: {{ header_primary_nav_size }};
  text-transform: {{ header_primary_nav_text_transform }};
}

This is the "modifying/creating a theme 101".

Summarised:

• Add a new function to the fields.json
• Set it to your theme-override.css
• put the hubl into the desired CSS place

Hope this helps

best, 

Anton

[SOxley]

Hi @Anton ,

Thanks so much for this very useful guide. The step by step overview os going to be a life saver. I appreciate you putting in the time to put this together. 

I'm going to give this a try and will report back asap. 

Thanks again and have a lovely day,

Sarah

[dennisedson]

Although @Anton is a big cheater, he is a pretty good guy 😺

[dennisedson]

Hi @SOxley 

I would test in the content staging.  This will basically clone the page and put the copy in a safe place where you can fiddle away with a new features.

PS -- annoyed that @Anton 's solution worked and the one I suggested to support didn't

Pretty sure Anton cheated 😛

[SOxley]

Thanks @dennisedson. Sounds like a safe option. 

I never knew you could cheat with code, but maybe you can 😂😁

[SOxley]

I may be using the themes incorrectly. I've been able to do a lot of work using the Martech theme. (One of Hubspot's six free themes)

I had been making copies of it to make changes but with little success until a member of support told me how to very easily make changes within the Martech theme. 

All of my website pages are connected to this modified Martech theme. And I have far too many theme copies that I can't remove so if there's a way to change the css file of my default and modified Martech theme that would be great. 

Thanks for your help. 

[SOxley]

Hi @dennisedson , @jonchim , @Anton ,

Thanks for your replies and for trying to help. Still having some trouble unfortunately. Support has also got back to me with advice on the changing the header font size in the css file. It doesn't seem to be having an impact. I've taken some screenshots to show what I've done as I'm hoping I'm simply missing something in the code. 

Support suggested I change the font-size in the _header.css file. It was originally 12px so I tried changing it to 22px to see what happens. 

My header menu font size appear to remain the same size as before:

I went to the "_default.modules.css" (The only default file I spotted but not really sure what I'm looking at or for...) and found a ".hs-menu-wrapper ul", couldn't find "li" though. I added the code where I thought it was meant to go, but still no luck. 

I also tried changing the coe to be {# replace font size with desired font size 20px} to see if I was simply not using the code properly but also hasn't worked. 

Any advice would be greatly appreciated. Thanks very much 

[jonchim]

Hey @dennisedson @SOxley,

So the font size of the navigation is adjusted with the body font size in the typography settings. That's probably not ideal if you wanted the navigation size to be different. But I assume it was coded that way to keep it nicely scaled and consistent. 

If you wanted to adjust the font size manually you can add this to your custom css and change the font-size to your liking.

.header__menu .header__navigation .menu-link {
font-size: 16px;
}

[dennisedson]

@jonchim , I noticed that this was already set in the css.  Actually, I believe it was set exactly as you have that code block 😲.  

Unfortunatly, I am pretty sure it will have to be updated in the css and the body font size would not have any affect 😥

[Anton]

Hi @SOxley, 

couldn't find it in the marketplace. Could you please provide a preview link for best possible help?

If it's the default menu you should be able to search for following class in your CSS file

.hs-menu-wrapper>ul>li

(maybe there are spaces between the brackets)

there you should find a font-size option like this:

.hs-menu-wrapper>ul>li{
font-size: 16px {# replace with desired font-size #}
}

Change it to your desire, save the file and (cache clear) refresh the page. 

(Hard refresh in Chrome: STRG+Shift+R)

If you shouldn't find it add the code above at the very bottom of your CSS file. 

best,

Anton

[dennisedson]

Hi @SOxley 

Was just snooping around the theme and it appears that that was not an option set for the theme editor so you will need to adjust in the css.  I reached out to the support rep to tell them where to edit and they should reach out to you shortly with a link to the line that needs to be edited.

Now for the second question.  That is a very subjective one.  If you would like to some thoughts on it, you will need to post a link to an example page so the Community can see

@jonchim and @Anton are the people who would be able to get you some solid opinions!