Global Header Module Loses Styling When Used

[MattAndy]

When ever I try using a global module for our navigation header, it loses all of it's styling. See Below:

 IT should look like this:

Our site was designed by a company we no longer work with so I unfortunatly do not know exactly how they set things up but was hoping one you could offer some clues as to what is going on with this.

Thanks,

Matt

[Ty]

Hi @MattAndy,

I took a look in your portal and from looking around, I noticed that all the pages that have the working header are actually built out of raw html. In the head of all of these html files, they include this group of link tags, which are all css files, here's what each on does:

        <link rel="stylesheet" href="{{ get_public_template_url('custom/page/PPS_Template_CSS/PPS_Templae_Bootstrap.css') }}">
        <link rel="stylesheet" href="{{ get_public_template_url('custom/page/PPS_Template_CSS/Bootstrap-Theme.css') }}">
        <link rel="stylesheet" href="{{ get_public_template_url('custom/page/PPS_Template_CSS/Font-Awesome.css') }}">
        <link rel="stylesheet" href="{{ get_public_template_url('custom/page/PPS_Template_CSS/PPS_Template_Global.css') }}">
        <link rel="stylesheet" href="{{ get_public_template_url('custom/page/PPS_Template_CSS/Header.css') }}">
        <link rel="stylesheet" href="{{ get_public_template_url('custom/page/PPS_Template_CSS/PPS-Style.css') }}">

Let's start with the basics.

Bootstrap-theme.css - This is the basic css file that runs the bootstrap library. Bootstrap is a responsive framework that utilizes it's own classing system to create pages in a 12-column grid that helps make pages and apps easily responsive and scalable. You can learn about it here.

Font-Awesome.css - FontAwesome is an app that uses it's own classing system to replace the `:before` tags of certain divs, (usually <i> tags) with scalable vector icons that can instantly be customized, colored and styled. This css file usually holds all of the reference tags, you can learn more about FA here.

Now that the basic files are defined, let's take a look at your custom ones...

PPS_Templae_Bootstrap.css - After looking at this file, it is basically your own custom Bootstrap theme. This is used to finely-tune certain bootstrap elements that come out of the box, so that they work better with your layout. This deals with a lot of your responsive css.

Header.css - Pretty self explanatory, but this is the css that affects your header, this is also the file that is missing on your gallery template 🙂

PPS-Style.css - This file deals with your entire website's css, this can range from fonts, colors to even layouts and custom widgets. 

So what do you need to do?

All you need to do is include your missing files! You can do this a couple different ways, knowing that these are some files that you will almost always need, you can 

1. [best in practice] Put your file group (above code snippet) in your whole site's HTML Header, this way it is loaded in on every page.

2. [good] Put this snippet on your template level in the "edit>head" option on the template.

3. [works, but you're really gonna be creating a lot more work for yourself.] Include these files on the page level, of every page that doesn't display the header.

Based off of your situation, I would say that you would want to include these on the template level, since you are already including them on other pages. If you were to put them in your global site header, this calls would be appearing multiple times on some pages, which is something you should aim to avoid!

Hope this solves your problem! Let me know if there is anything else I can help with!

[MattAndy]

Thanks for your help, Ty - I'll pass this on to a web designer who is helping us out.

[nattyice]

Hi @MattAndy! Thanks for your post!

Are you using this header currently on any live HubSpt pages where it is rendering properly? If so, can you provide a link to that page?

It is most likely that there is a certain stylesheet being applied to templates where the header renders properly versus when it doesn't. We'll need to identify that stylesheet so we can either apply the whole file to the template, or pick out the relevant CSS that targets the header and make sure it is applied where needed.

This article explains how to determine which stylesheets are being applied to certain pages, and this article explains how to attach a stylesheet to a template or an individual page.

Please let me know if I can be of any additional assistance identifying the stylesheet!