Adding a banner next to header image

Hey there anddab,

Hope you’re well today!

This should be possible with editing header.php of the theme. Ideally you don’t want to edit theme core files to avoid losing the changes once you update the theme, so I’d strongly suggest creating a child theme and making a copy of your header.php (which is located in the root folder of your theme) there and adding the following code to line 50:

<div class="mycustombanner"><a href="Insert your link here"><img src="Insert link to your image here"></a></div>

The end result should look like this https://screencast.com/t/ekSDwUBnyCv. Also please replace dummy URLs with the actual URLs. This should display the image with the link next to your logo and after that you can re position it or apply some styles with some custom CSS.

Hope this helps ??

Best regards,
Bojan

Hi Bojan, thanks for the reply, hoping you are having a nice day too ?? !

Thats what i’ve done a couple of hours ago (creating a child theme too); the problem is that the new div class put itself under the “header”, not next to.

Here you can se what i mean (i called the new div class “ulcerebanner”)

https://www.radiointerstella.com/

I need to put that tiny-red-tear next to the INTERSTELLA MAGAZINE logo.

Again, thanks for the support!

Hey again anddab,

That was just a matter of CSS and positioning both elements in the header or you possibly placed it into the wrong div inside header.php. Either way I’ve checked your site and it appears that you managed to figure this out and place it next to the logo.

Have a great day!

cheers,
Bojan

“That was just a matter of CSS and positioning”

What would the css look like to get the “mycustombanner” image to move to the side the way he did?

Thanks

Hey there tomymcf,

How are you doing today?

It depends what you’re actually adding to the header and what you want as outcome there. Would you mind adding more details on what you’re trying to do and post link to your site where I can see this and I’ll be happy to try to assist you with that ??

Best regards,
Bojan

I don’t have a page yet. But I want to do the same thing.
So what comes after editing the header like you showed here?

line 50:

<div class=”mycustombanner”><img src=”Insert link to your image here”></div>

What would be an example of the CSS to position the image to the left like anddad did with the red drop graphic?

Hey again tomymcf,

The new image should be placed below the logo, depending on the size of the image you can use different CSS to re position it elsewhere (for example next to your original logo).

If you place your image into the header and post link to your site I’d be happy to take a look and help you with that ??

Cheers,
Bojan

https://www.mc-hvac.com/
I’d like to move the facebook and email icons up into the header.
can’t seem to figure it out, and trying to do it without a child theme.

I almost have it work on this page… https://tooooom.com/
but that page has a child theme. the first one doesnt.

Thanks

Hey there tomymcf,

Thanks for the link, I checked your site and it appears that your icons are not placed in the header but rather in the page content or template. If you want something to be displayed in the header the best way of doing it would be to place it into header.php of your theme.

You can do that in your parent theme but the reason that is not good is once you update the theme that header.php file will be overwritten by the one from the update and your changes will be lost which is why the correct way of doing it would be creating child theme as mentioned above.

With that being said if you’re looking for an easy way of doing it I guess you can apply negative margin with CSS to those icons and move them into header but I would strongly suggest using the header method, to do so please try adding the following CSS by using this plugin https://www.ads-software.com/plugins/simple-custom-css/, once the plugin is installed and activated add the following to Appearance -> Custom CSS:

.“mymailicon” {
  width: 10%;
  float: right;
  margin-top: -130px;
  padding-right: 80px;
}

.“link1” {
  width: 10%;
  float: right;
  margin-top: -130px;
}

This should be the result https://screencast.com/t/czGO0aiR3zQw.

Best regards,
Bojan

that works nicely.
??
thank you

Glad this works for you ??

Have a nice day!

Cheers,
Bojan