Adding Navigation to Pillar Page

[cmfield]

I'd like to add the same navigation menu that my website and my HubSpot blog is using to a pillar page that I'm working on. My blog navigation is using a global group, but the CSS that the blog template is using interferes with the CSS that the pillar page is using and so it breaks the structure of the page. Can you help me get a navigation menu on my pillar page template that matches the navigation menu on my blog? Thanks!

[Jsum]

Hi @cmfield ,

You need to have someone familiar with css, and hubspot templates, to go in and scope your css.

If the header and footer are effecting the rest of the page: You first need to apply a unique class to your header and footer (if one does not exist), then you need to go through your css and apply that class in front of all of the css commands causing the issue.

If the rest of the page is effecting your header and footer, its the same process but in reverse.

You can use your browser's inspector tool to inspect infected areas, find the css file and css commands causing the issue, then you need to scope them one by one. If it is done correctly, both will look correct and the rest of your site will not be effected.

Let me know if that helps.

Need help? Hire Us Here

[Kevin-C · Accepted solution]

Hey @cmfield 

I'm sure we can fine an elegant solution! If you could orovide a few links, including:

• A link with the navigation you would like to replicate
• A link to the blog
• And the markup you've attempted

A sort of namespacing the css could be a solution. For instance:

The desired and current  nav css might look like this:

// Nav module level
nav {
  …
}

// Logo level
.logo {
  …
}

// Nav element level
nav ul {
  …
}

nav ul li {
  …
}

nav ul li a {
  …
}

And to override everything it could look like this:

// Nav module level
#nav {
  …
}

// Logo level
#nav .logo {
  …
}

// Nav element level
#nav .nav-ul {
  …
}

#nav .nav-ul .nav-li {
  …
}

#nav .nav-ul .nav-li .nav-a {
  …
}

This way you could potentically include a reset strickly to the '#nav', but that might be overkill and slow down rendering.

Maybe not exactly 'best practice' for your build, but a workable solution that can be done rather quickly.

[cmfield]

Thank you for your response!