CSS Help

SOLVE
paxtonmiller
Participant

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

0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Key Advisor | Partner

@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.

View solution in original post

0 Upvotes
4 Replies 4
Kevin-C
Key Advisor | Partner

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
Participant

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!

0 Upvotes
Kevin-C
Key Advisor | Partner

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
Solution
Key Advisor | Partner

@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.

View solution in original post

0 Upvotes