CSS Header Help

[paxtonmiller]

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!

[sharonlicari]

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