Custom sticky header?

Hi guys,

I was just wondering whether it was possible to change the design of the sticky header, to be different to the header we’ve applied to the website.

Currently we’re using the ‘Logo centre’ header, with our standard company logo up top. We’d like for that logo to change to another one of our logos (and centre align it too) in the sticky header. Please advise as to whether this is possible and how we could achieve this. Thank you very much for your time.

Regards,
Dominic

Hello,

Thank you for using our theme.

We have prepared some CSS code that may do the necessary adjustments on your web-site to make sticky header look as you want to. This part add to Custom CSS section in Theme Settings -> Custom CSS

.sticky-header .container {
    display: flex;
    -webkit-display: flex;
    display: -ms-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: -ms-space-between;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    height: auto;
    min-height:60px;
}
.sticky-header .container:after,
.sticky-header .container:before {
    content:none;
}
.sticky-header .right-column,
.sticky-header .main-nav {
    width:40%;
}
.sticky-header .main-nav {
    order: -1;
    -ms-order: -1;
    -webkit-order: -1;
    text-align: left;  
}
.sticky-header .site-logo {
    width:20%;
    text-align: center;
}
.sticky-header .site-logo img {
    max-width:100%;
}

And this part add only for mobile devices

.sticky-header .right-column,
.sticky-header .site-logo {
    width:auto;
}
.sticky-header .right-column {
    flex-shrink: 0;
    -ms-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
}

Thank you, admin!

That worked like a charm. If you don’t mind, I have another question now that we’ve implemented the change.

What would we have to change in the CSS to center the nav menu, and have the logo on the left side, just for the sticky header only?

Much appreciated,
Dominic

Hi,

Just remove all the code we have provided to you and logo will be on the left side with menu center. 🙂

Oh, right. Haha should’ve known that. Okay well I think that’s it from me for now. Thanks for all your help. You can go ahead and mark this thread as solved. Have a good one!

Regards,
Dominic

You are welcome, write us when you have any difficulties or issues with our theme.

And we would be glad if you will rate our theme with 5 stars on themeforest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

Thank you in advance 🙂

[Author]

Posts