Topbar spacing & social icon issues

[Luke]

Hi guys,

I need a little help with customising my topbar if possible. I currently have some text, a small .png image & two social icons. When there is only text, the topbar height is nice and narrow. The problems start when I add the image, and the height automatically increases leaving a large white gap below the image that I can’t seem to adjust (the image is roughly the same height as the text so it shouldn’t be adding height at all to the topbar).

Further, when I add social media icons, the height increases again, putting the text and image at the top and the social icons at the bottom with a huge amount of white space in between. I just want the elements to be aligned neatly on one line, inside a narrow height topbar.

I also would like to change the colour of the social icons which I can’t seem to find a way to do.

Is there any way to edit or make adjustments to fix these issues? Or do I need some custom coding?

I would really appreciate your help, thank you!

Jacinta

Screenshot

[thai]

Hi There,

Upon checking your website, I could see that there is HTML table in your topbar content. Since the topbar content has the <p> container, adding the <table> tag will break the HTML structure.

I recommend you change your topbar content to this:

<a href="https://www.premierkitchens.net.au/kitchen-showroom-contact/">Visit our kitchen showrooms at 63 &amp; 54 Penshurst St, Willoughby, Open 7 Days </a><img src="https://st.hzcdn.com/static_en-AU/[email protected]" alt="peter6583 in Willoughby, NSW, AU on Houzz" width="181" height="25" border="0">

Let us know how it goes!

[Luke]

Hi Thai,

That worked a treat! Thank you so much!! http://prntscr.com/kfyllu

Just a couple more things:

1. Is there anyway to add a little space between the text and the Houzz logo on that topbar?
2. How can I change the hover colours of the social icons? I would prefer our own corporate blue (#087cc1) and white icons on hover if possible?

Thanks again

[thai]

Hi There,

Please also add this custom CSS under Theme Options > CSS:

.x-topbar .p-info img {
    margin-left: 15px;
}
.x-topbar .x-social-global a {
    color: #087cc1;
}
.x-topbar .x-social-global a:hover {
    color: #fff;
}

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.

[Luke]

That worked perfectly! Thank you

Thanks also for the tutorials and resources, I will check those out.

[rad]

You’re most welcome!