Transparent Website Header?

SOLVE
Highlighted
Occasional Contributor

Hubspotter's, we're new to Hubspot (at least new to attempting to standing up a website in Hubspot), and the Hubspot team did a migration of our current website however that needs a series overall (the old website).  Question 1 is simply, how do i make a transparetn header like the image attached (my website mockup).  I"m assuming their's a setting, a CSS / HUBL script or object?  

transparent header mockuptransparent header mockup

 

 

 

 

thanks in advance.  -Jason

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Highlighted
Community Superstar

_hubspot-button-accept-as-solution-gif-v00.gif

Help other HubSpot searchers find this post quickly by accepting this solution today.

 

Q: Simply, how do i make a transparetn header like the image attached (my website mockup)?

 

Short A: Simply, don't set a background color for your header. Typically, no background color = transparent!

 

Longer A:

That being said, it's often not quite that simple because once you remove the background color elements contained in the header that aren't transparent will show their surrounding backgrounds - e.g., the logo.

 

Also, you'll want to consider header treatment for mobile devices. Preferably 'mobile-first'.

 

That's the gist of it. If you need/want more detailed answers you may want to share a link to your site and ask over in the design forum.

 

Always happy to help you build on HubSpot.

 

Best,
Frank

 

#nlmtt #nlmtu #hsspp


hubspot-solutions-signature-mfrankjohnson-v03.png

www.MFrankJohnson.com

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Register here for Inbound 2020

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Highlighted
Community Superstar

@jcb-unna, you got it right. Generally speaking, everything is transparent unless/until you assign a background color (or color in some cases). This includes menus.

 

>> My only ask is..... in the Hubspot design studio, how do i place a transparent header/menu over the banner... or is that just automatic?

 

So original answer stands ...

 

Short A: Simply, don't set a background color for your header. Typically, no background color = transparent!

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Register here for Inbound 2020

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Reply
0 Upvotes
3 Replies 3
Highlighted
Community Superstar

_hubspot-button-accept-as-solution-gif-v00.gif

Help other HubSpot searchers find this post quickly by accepting this solution today.

 

Q: Simply, how do i make a transparetn header like the image attached (my website mockup)?

 

Short A: Simply, don't set a background color for your header. Typically, no background color = transparent!

 

Longer A:

That being said, it's often not quite that simple because once you remove the background color elements contained in the header that aren't transparent will show their surrounding backgrounds - e.g., the logo.

 

Also, you'll want to consider header treatment for mobile devices. Preferably 'mobile-first'.

 

That's the gist of it. If you need/want more detailed answers you may want to share a link to your site and ask over in the design forum.

 

Always happy to help you build on HubSpot.

 

Best,
Frank

 

#nlmtt #nlmtu #hsspp


hubspot-solutions-signature-mfrankjohnson-v03.png

www.MFrankJohnson.com

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Register here for Inbound 2020

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Highlighted
Occasional Contributor

Thanks, @MFrankJohnson for the response. FYI here's my quick reply followed by ask/comment:

 

  • clarity:  I took advantage of Hubspots migraion service.  However, i'm not a coder or familiar with CSS/js and limited HTML (search stackoverflow, copy, paste).  I cannot figure out how to modify the CSS/js in my header/menu that was provided by the migraion team
  • images in transparent header:  covered, all images are vector with transparent backgrounds.  
  • header treatment:  I'm not a coder, i'm the biz side of things, but will look up these tweaks/css/js
  • sharing link:  i'll pop over to design community however my website is concept / mockups only at this stage. 

 

I'm transitioning my current website from our own Wordpress and switching to Hubspot (DNS move only, i'm redoing new website from scratch).  I have all graphics, a sitemap, copy, mockup, etc.  My only ask is..... in the Hubspot design studio, how do i place a transparent header/menu over the banner... or is that just automatic?  

 

I'll post the same in the design forum.  cheers, -J

 

Reply
0 Upvotes
Highlighted
Community Superstar

@jcb-unna, you got it right. Generally speaking, everything is transparent unless/until you assign a background color (or color in some cases). This includes menus.

 

>> My only ask is..... in the Hubspot design studio, how do i place a transparent header/menu over the banner... or is that just automatic?

 

So original answer stands ...

 

Short A: Simply, don't set a background color for your header. Typically, no background color = transparent!

 

Note: HubSpot is a constantly evolving platform. Please check the date of each post and view all solutions in that context.

-- Register here for Inbound 2020

 

Hope that helps.

 

Be well,
Frank


Support • Web • Apps • Training

HubSpot's Hiring World-Wide!

Reply
0 Upvotes