How to place banner ad in header :: Next to logo?

[zerway]

Hello,

How can I place a 728x90 banner ad in the white space to the right of my logo at http://www.singleroots.com?

I've tried using the "Header Right" widget in the Metro Genesis theme, but it only spans about 200 pixels.

Thanks for any help!

Ryan

http://www.singleroots.com

[Peter]

Put it back in the header right widget area, that's the right place to put it. Need to see it, but you should be able to adjust the width of that area.

[Brad Dalton]

Line 450 of your child themes style.css file.

Increase width.

#header .widget-area {
	width: 31.111111111%; /* 336px / 1080px */
}

Line 519 increase min-height

#header {
	min-height: 87px;
	overflow: hidden;
}

Line 558 increase min-height

.header-image #title,
.header-image #title a,
.header-image #title-area {
	display: block;
	float: left;
	min-height: 87px;
	overflow: hidden;
	text-indent: -9999px;
}

---

Tutorials for StudioPress Themes.

[zerway]

Peter & Brad,

Thanks for commenting. Unfortunately, it doesn't seem to be working with the changes you suggested.

I changed the style.css in the Metro theme 2 different ways and both had the same negative result. Both changes made all the content in my right sidebar disappear. The sidebar was still shown...it was just empty.

I tried:

#header .widget-area {
width: 728px; /* 336px / 1080px */
}

AND

#header .widget-area {
width: 50%; /* 336px / 1080px */
}

Changing "min-height" to 90px did not cause any problems. Only adjustments to width.

I have inserted the banner in the Header-Right widget area, so you can see what it looks like before making any changes to style.css.

Am I increasing the header widget width incorrectly?

Thanks for the help...Ryan

[darrencknight]

Have you tried using the Google Publisher plugin? I just started using it and I like it. Follow the setup instructions. It may or may not be able to find that location to insert an ad.

https://wordpress.org/plugins/google-publisher/

[Peter]

Zerway,

#title-area {
max-width: 300px;
}

.header-widget-area {
max-width: 728px;
}

note: remember to remove #header widget-area { width: 31.11111%; }, or add the width to this instead.
You can use use width or max-width, but max-width will preserve the mobile responsiveness.

[zerway]

Peter,

I made your suggested changes, and it did make the "right header widget" area 728px, but unfortunately, it made the right sidebar move with it -- it became 728px as well.

Sidenote: Another thing that happen when I made this change...my logo lost it's hyperlink?

Below is what I changed...I'm not sure why my "right sidebar" seems to mimic by "right header widget." Any ideas what I'm doing wrong?

1a) Original:

.content-sidebar #content,
.sidebar-content #content,
#title-area {
width: 65.55555555%; /* 708px / 1080px */

1b) Changed to:

.content-sidebar #content,
.sidebar-content #content,
#title-area {
max-width: 300px; /* 708px / 1080px */

AND

2a) Original:

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
.subnav-left,
#header .widget-area {
width: 31.11111%; /* 336px / 1080px */
}

2b) Changed to:

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
.subnav-left,
#header .widget-area {
max-width: 728px; /* 336px / 1080px */
}

[Genesis Developer]

go to line no 471 and replace

.content-sidebar #content, .sidebar-content #content, #title-area {
    width: 65.5556%;
}

with

.content-sidebar #content, .sidebar-content #content {
    width: 65.5556%;
}

And replace

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar, .subnav-left, #header .widget-area {
    width: 31.1111%;
}

with

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .sidebar, .subnav-left {
    width: 31.1111%;
}

I think that all will be solved now

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[zerway]

genwrock - This did it! Now, the only thing it broke is the image hyperlink for our logo. Any ideas why it did this?

Thanks for much for the help so far.

[Peter]

Zerway, you should add the code exactly as shown (if unsure where to put it, then put it in the bottom of your stylesheet). What you did there was change the width for all of those elements listed, which is obviously not what you want.

[Genesis Developer]

@Zerway

Add this code in your style.css file

#title-area{display: block; width: 27%;}

So All will be shorted now

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[zerway]

@genwrock -- that did it.

Thanks to everyone who took the time to help me with this issue. This was my first time on this forum, and I am very grateful for you guys offering your expertise.

Thanks again,

Ryan

[Genesis Developer]

Welcome to Genesis Community Club. Here everyone is very helpful & expert.

Thanks

Chinmoy

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[Author]

Posts