Social Header and Donate Button Styling

[cwdeek]

Hello, I would really like to add a donate button and social icons to the top right hand side of the header with it centred on the mobile render. I have added the social and button widget in the header widget which has placed it behind the menu as per my image attached.

[Veena]

Can you pls share a link to your site?

[cwdeek]

Sure
http://www.helpthejourney.com

[Veena]

Have you removed the button and social icons?
Can you pls add the same and then we will be able to suggest the required custom CSS .

[cwdeek]

Hi, i’ve made the changes, please look now. Thanks

[Veena]

You can try the below custom CSS in themeoptions –

#header .wrap .alignright {
    float: none;
}
#sidebar-header .button {
    right: 0px;
    top: 30px;
}
#sidebar-header .social-list {
    right: 150px;
}
@media only screen and (max-width: 767px){
#sidebar-header .button {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 150px;
    top: 0;
}}
@media only screen and (min-width:767px) and (max-width: 1100px) {
#sidebar-header {
    float: none;
}
}

[cwdeek]

That’s perfect, thanks so much 🙂

[Author]

Posts