Design / Implement Website (with transparent header)

[jcb-unna]

design friends....

I'm new to hubspot, recently posted a question on transparent header/menu in another forum and thanks @MFrankJohnson for suggesting i post here.  

I'm building a new website, and I want it to look like the mockup below.  In doing so i have a few questions maybe ye can help out with:

1. I'm assuming the 'rich text' editor is where all the magic happens for us non-css people? for example, I create a section, then add a rich text module and that's where i put background colors, images, format and align, etc. (in essence, this is my CMS UI)?  
2. Creating a menu - i'll search for a link here in this forum or other to learn how to do this however, if I create a header (logo, menu, CTA button) and make it transparent (i.e. 'no color'), will that automatically appear above any banner image?  

thanks for the feedback.  for a glimpse of what i'm doing here's my sitemap / mockup homepage.  Cheers, -Jason

mockup homepagesitemap

[Stephanie-OG]

Hi Jason,

I'm afraid you will need to go into the Design Manager and use some amount of CSS to create that template.

For the transparent background, typically what I do is add a Rich Text module and then add it to a group with the CSS class "page-center" (be sure to attach your site's stylesheet, this should set it to the width of the rest of your site) and then add it to another group which I can call "Background Image" where you can use the "Inline Styling" to add your background image. For example, like this: 

background: linear-gradient( rgba(45, 50, 54, 0.6), rgba(45, 50, 54, 0.6) ), url(https://images.pexels.com/photos/449627/pexels-photo-449627.jpeg); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: 100px 20px;

That "linear-gradient" darkens the image, you can replace the URL with your own image URL, and change the 100px padding to how much distance you want from the top and bottom and the 20px padding to how much distance you want on the left and right.

It should look something like this on the back-end: 

And like this on the front-end: 

To make a transparent header appear above your image, you typically need to set the top-margin of the background image to the height of your header so that it's under it. So you might add the following to the above:

margin-top: -120px;

I hope that helps!

---

HubSpot Design / Development / Automation

Website | Contact

If this helped, please mark it as the solution to your question, thanks!