CSS Header Help

paxtonmiller
Participant

My company recently transitioned all of their webpages to a new hosting format, but our blog page only is still using the Hubspot template. Basically, I need help editing the CSS of the HubSpot header to match the format of our new website.

Blog Website (White header, Dark text) https://blog.stratus10.com/

New Website (Dark, semi-transparent background, white text) https://stratus10.com/

 

Basically, I need the header of the blog to match that of the new website. I have attached the CSS from the blog and would love it if someone could tell me what I need to change to match it! (Sorry I am a beginner!)

.header-top-wrapper {
background: #e6772e;
padding: 4px 20px 3px;
text-align: center;
color: #fff;
line-height: 40px;
}

.header-top-wrapper p {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-weight:300;
}

.header-top-wrapper p a {
background: #c7580f;
display: inline-block;
padding: 2px 10px 1px;
color: white;
text-decoration: none;
margin: 4px 20px 5px 17px;
border-radius: 3px;
line-height: 28px;
}

.custom-logo{
padding: 20px 0;
}

.custom-logo img {
width: 230px !important;
}

.header-bottom-wrapper .page-center {
max-width: 100% !important;
padding: 0 70px !important;
}

.header-bottom-wrapper {
background: #fff;
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2);
box-shadow: 0 0 4px rgba(0,0,0,0.2);
position: relative;
z-index: 999;
}

.header-outer-wrapper {
min-height: 104px !important;
}

.header-bottom-wrapper.header-trans {
position: fixed;
width: 100% !important;
top: 0;
left: 0;
z-index: 99;
background: #fff;
transform: translateY(-100%);
transition: transform 0.7s;

Thank you!

0 Upvotes
1 Reply 1
sharonlicari
Community Manager

Hi @paxtonmiller    

 

thank you for the information provided,  this will help the experts. I will tag so they will be able to advise you.      

 

Hey @narmstrong @tjoyce @DaniellePeters   could you please share your knowledge with @paxtonmiller?

 

Thank you & Happy Friday

Sharon


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes