How to add banner image to the topbar

[Cooksley]

Hi there,

I’m a first time X Theme user…

Only just started to build a site for a client to replace the poorly developed website…My client is part of an international car service franchise with very strict media design criteria. There is nothing on the site as I have literally just started with Cornerstone.

I have searched the forum but haven’t found what I’m looking for.

I need to insert a banner image similar to the attached screenshot. You will see that the image is very close to the top of the website and the dark blue bar stretches from end to end (with small margin on both ends). I see there is an option to add the topbar.

The question is what is the CSS code to add the images to the topbar?
(Don’t want to use a slider as the slider is actually positioned below)

Also, the light blue box on the left is a logo is with a box shadow which needs to sit on top of the dark blue bar. The logo also needs to be a clickable link.

Hopefully that makes sense.

Appreciate your help with this.

Best regards
Greg

[Prasant]

Hello @Cooksley,

Thanks for asking.

You have couple of option to add the banner image. However, please note that it will fall outside the scope of support we can offer as same will require custom development work. However, to help you get started I can point you in right direction.

• You can add the image as a background image using CSS background image property and I think this would be kind of more easy approach. You can refer following resource to learn more about CSS background image.

https://www.w3schools.com/cssref/pr_background-image.asp

• You can add the image by making changes in the theme files. Before making the required changes I suggest you to install and setup child theme. You can use following resources to download and setup child theme.

Download Child theme from following source: https://theme.co/apex/child-themes

Please take a look at following article to setup child theme:

Child Themes | Themeco Docs

Best Practices | Themeco Docs

After that you can copy _navbar.php from /wp-content/themes/x/framework/legacy/cranium/headers/views/global/ and paste under /wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/. Please note that you need to create the child folders in the same order. Now, depending on the position you want to display the image you can make the changes in the file. To display the image you will need to use HTML image tag. Please take a look at following article to learn more about the same.

https://www.w3schools.com/html/html_images.asp

Hope that helps you get started.

Thanks.