CSS Help

[paxtonmiller]

Have a quick question about the CSS of the header of my website. Should be a pretty simple question, I am just a beginner!

My website's header is currently a solid white block with dark titles that turn orange upon scrolling over it. It can be seen here https://blog.stratus10.com/

We created a new website that is hosted by a different company, and all pages what our blog has a new style of header, as seen here: https://stratus10.com/

I am trying to match it so that all of them are transparent, dark backgrounds, and a thinner navigation pane as seen on the new website. Here is the CSS of the old website that I am trying to update to match the new one:

.header-container-wrapper {}
.header-container {}

.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;
}

.fixed .header-bottom-wrapper.header-trans {
transform: translateY(0);
}

.fixed .custom-menu-primary .hs-menu-wrapper>ul>li {
padding: 19px 12px;
}

@-webkit-keyframes headerAnimation {
0% {
margin-top: -70px
}

100% {
margin-top: 0
}
}

@keyframes headerAnimation {
0% {
margin-top: -70px
}

100% {
margin-top: 0
}
}

.fixed .header-bottom-wrapper {
-moz-animation: headerAnimation .7s 1;
-webkit-animation: headerAnimation .7s 1;
-o-animation: headerAnimation .7s 1;
animation: headerAnimation .7s 1;
position: fixed;
width: 100%;
top: 0;
left: 0;
}

Thank you so much for any help

[Kevin-C]

Hey @paxtonmiller 

The two lionks you provided go to the same webpage, was that intential?

This might have to do with the question  above, but I'm not sure I understand what it is that you're trying to do. Might you be able to reword your request?

[paxtonmiller]

Thanks for the reply! I just realized I added the wrong link to one.

To clarify, our website used to have the header as seen on this https://blog.stratus10.com/

Yesterday, we changed websites and style to https://stratus10.com/ , but our blog remained hosted on the old website.

Basically, I need to edit the CSS so the header on https://blog.stratus10.com/ to look similar to https://stratus10.com/  . I have attached the CSS of the blog where I can edit it.

Thank you so much if you can help!

[Kevin-C]

Gotcha!

So this is actually, as I'm sure you know a  rather large request in terms of both time and effort. This might honestly be something worth out sourcing. But to also off another alternative, I know someone has documentated all of the css needed for HS nav menus somewhere here on the forum. With that documentation in hand you'd be well on your way.

[Kevin-C · Accepted solution]

@paxtonmiller 

So another possible solution just popped into my head.

Assuming you're ok with not using the built in navigation menu (we don't use it). You could create a custom module for the navbar, then copy and paste the old html markup into the module, update the URLs, and add the applicable existing CSS to the page.