Top Bar Image Concerns

Hey, thanks for reaching out! Hope you’re having a great day. ??

If you could please share a link to the site that yo’ure working on, then we should be able to quickly answer all your questions. It’s a bit difficult just going off of a screenshot.

Thanks!,
Kevin

I’m sorry, I thought I had. It’s https://globallygrowing.one

Hello,

Apologies for the delay in getting back to you!

1. If you zoom in on the image, you will see that the top bar isn’t flush with the top of the page.

The background image used itself has the space at the top. Kindly make sure to remove that and reupload the image.

2. For some reason, on the right side of the page, the image seems to overlap in color, i.e., it darkens, then there’s a clear line where it lightens again. The image used isn’t like that.

I can see you added a custom CSS code for the background image. Kindly add another CSS property to make sure the image covers the full width of the topbar – https://share.getcloudapp.com/6quYGW0k.

.topclass {
    background: url(https://globallygrowing.one/wp-content/uploads/2021/08/Topbar-Image.png);
    background-size: cover; //add this
}

3. I’m using the topbar widget to link to my main website, but for the life of me, I cannot get it to perfectly center on the top bar. I suspect I have something to do with the fact that the top bar isn’t stretching to the end of the page.

By default, the topbar has 2 columns. With your current setup, you can add this custom CSS code in Theme Options > Advanced Settings > Custom CSS:

.topclass .kad-topbar-right {
    width: 100%;
}
.topclass .kad-topbar-right p {
    margin: 1em 0;
}
.topclass .kad-topbar-right a {
    display: block;
    text-align: center;
}
.topclass .kad-topbar-left {
    display: none;
}

Hope this helps.

Best Regards,
Karla

Yes, Karla, it helped a lot. I have to say that the second issue went away when I corrected the image used, although I don’t understand why. I’m just glad it did.

Thanks for all your help. And no worry concerning the delays. I’ve been behind myself these days, so it all worked out just fine.

Kind regards,

Sharon

Well, I’m back. LOL

I have no clue how I managed to get the link on the globallygrowing.one site on that top bar. Can you please kindly refresh my memory? I’ve moved that site since the host wasn’t satisfactory to me, and now I’m at a loss as to where to add it. This time, I’m working on my globalgrowthpublishing.org site which isn’t live at the moment. If you need to see it to assist me, please let me know and I’ll activate it for 24 hours.

Please kindly advise.

Thanks for all your help.

Hello,

I have no clue how I managed to get the link on the globallygrowing.one site on that top bar.

I actually do not remember the structure you had before as well. However, I believe you just added a text with a link in the Appearance > Widgets > Topbar Widget area.

You may also refer to this page for the free theme documentation.

Kind Regards,
Karla

You were absolutely right. Thank you. Is there a way to change the font type though? I wanted to use the Baskerville Old Face font which is what appeared when I typed in the text. However, I didn’t see an option to change it. The only text settings available were drop cap and text color.

Hello,

Apologies for the delay in getting back to you.

Is there a way to change the font type though?

Since you’re using H2 for the topbar text, it will follow the general H2 font family you set on Theme Options > Typography – https://share.getcloudapp.com/GGu46r7X.

If you want to specify another font family, you can add custom CSS code in Theme Options > Advanced Settings > Custom CSS. For code reference, you can use this:

h2#global-growth-publishing {
    font-family: 'Baskervville';
}

Here’s how it will show – https://share.getcloudapp.com/5zu9Awve.

Regards,
Karla

Adding the CSS code worked perfectly. Thank you. Is there a way to remove the italics, though?