CSS Header Help

Highlighted
New Member

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!

Reply
0 Upvotes

0 replies

No replies on this post just yet

No one has replied to this post quite yet. Check back soon to see if someone has a solution, or submit your own reply if you know how to help! Karma is real.

Reply to post

Need help replying? Check out our Community Guidelines