Topbar middle align

Support
#1

Hi. I am working on this page: http://leadersormlandskusten.se.preview.binero.se
I would like to have the text, link and social icons aligned in the middle in the topbar. Is that possible?

Tomas

#2

Hi Tomas,

I could see that you’ve changed the height of topbar. Please try adding this custom CSS under Theme Options > CSS:

.x-topbar .x-social-global {
    margin-top: 18px;
}
.x-topbar .p-info {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .x-topbar {
        height: auto;
    }
    .x-topbar .p-info {
        margin-top: 0;
    }
    .x-topbar .x-social-global {
        margin-top: 5px;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

#3

Perfect. Thanks.
I managed by myself to add a background picture to the topbar. I would like to do the same thing for the footer. But what code should I write instead of:
.x-topbar {
background-image: url(“http://leadersormlandskusten.se.preview.binero.se/wp-content/uploads/2018/09/topbarbackground1.jpg”);
Height: 55px;
}

that is instead valid for the footer?
Is it as simple as
.x-footer

#4

Hi @TomasJarvling,

It should be like this,

 .x-colophon {
background-image: url("http://leadersormlandskusten.se.preview.binero.se/wp-content/uploads/2018/09/topbarbackground1.jpg");
}

Or if you have to apply a background to each footer section, then it will be like this

 .x-colophon.top {
background-image: url("http://leadersormlandskusten.se.preview.binero.se/wp-content/uploads/2018/09/topbarbackground1.jpg");
}
 .x-colophon.bottom {
background-image: url("http://leadersormlandskusten.se.preview.binero.se/wp-content/uploads/2018/09/topbarbackground1.jpg");
}

Hope this helps.

#5

Perfect. Thanks

#6

You’re welcome!
We’re glad we were able to help you out.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.