Custom Navigation Woes

[#1]

Hi there, I'm new to hubspot and am trying to update the nav for our blog with some custom html, css and js. I am able to get the html and css working in a template, but I can't get it to scale down and switch to the mobile nav correctly.

Please see this codepen for how it should work: https://codepen.io/MDSOjke/pen/bb2e67c95ff032857005f7479bbe64c7

This is how it's working within the COS design manager when scaled to mobile:

I have all the code and js inserted in the places al the Hubspot tutorials says but am having no luck. Has anyone seen this?

The other thing that may be causing it is the presence of other external scripts in the blog settings level header HTML (see below). Might this be causing a conflict?

I am reluctant to remove these as any changes will be made live. 

Any help would be great!

[#2 · Accepted solution]

Hi ieuanoh!

Thanks for checking out the community! I took a quick look at your template, and it seems that your mobile media query is not firing. I noticed on your codepen that you are using LESS. The comment structure in LESS //comment is invalid in CSS, so it is most like breaking your declarations.

HubSpot does not have a compiler in place currently, so it cannot read LESS code in a .css file. You do have two options though!

Option 1: Convert to Vanilla

Go into your codepen and in the CSS dropdown, click "View Compiled CSS".
This will convert it to a non-editable vanilla css list. (You can always convert back to edit!) From here, you can copy and paste this version into a COS .css stylesheet, and your menu should work

Option 2: Precompile

Nothing is stopping you from using LESS, but we can't help you compile it. You can compile it on your own machines, than upload the .less file into the file manager, and using the <link href=""> you can link to the URL of it in your file manager. This should act just like a normal LESS/CSS file!

If you want, head over to our ideas board and submit a feature request for a built in LESS compiler! I'm sure other people would love one as well! Feel free to link back to this topic in the idea request aswell!

Hope this helps you out!

--Ty

PS: I built your menu in my personal portal while testing, here is a version you can check out.

[#3]

Hi Ty,

Thanks for your response!

I had already compiled the CSS and it still wasn't working. However, I found the problem by looking at the code on your test. I was adding the js as a linked file in the template head but instead I just added it directly to the html code of the module as you did. That was really helpful!

Thanks a lot!

Ieuan

[#4]

Did adding it directly to the page affect page speed at all?