Empty space in header

[godin5150]

Long shot but was wondering if anyone on here can tell me if it's possible to have the header banner#2 show in the header next to my logo? Standard 468x68 banner. When I add the banner now in that position is shows under the logo. I tried to resize my logo smaller but it didn't help. My site is: https://noblenetsolutions.com using v1.5.7d Willing to pay for help. Thanks

[OldNGrey]

Long shot but was wondering if anyone on here can tell me if it's possible to have the header banner#2 show in the header next to my logo? Standard 468x68 banner. When I add the banner now in that position is shows under the logo. I tried to resize my logo smaller but it didn't help. My site is: https://noblenetsolutions.com using v1.5.7d Willing to pay for help. Thanks

If you inspect your code, you can see the logo is contained in a div statement. When the Tagline is included it is also contained in a div statement. Because a <div> is a block-level element it is designed to not display any element next to it unless you change its default behaviour. This can be done by controlling both divs with the css statement "display: inline-block;" in the css file you are using for your template.

You need to append "display:inline-block" to the css for #logo on line 129 and create a new line to define the taglineWrapper eg

/*top middle*/
#logo{margin:10px 0;display:inline-block;}
#taglineWrapper{display:inline-block;}

NOTE: Make a backup of your css file before you change anything. Also look at using the "Clone a Template" plugin to make your own version of the template and not be editing the master responsive classic template.

Bailey
OldNGrey

[godin5150]

If you inspect your code, you can see the logo is contained in a div statement. When the Tagline is included it is also contained in a div statement. Because a <div> is a block-level element it is designed to not display any element next to it unless you change its default behaviour. This can be done by controlling both divs with the css statement "display: inline-block;" in the css file you are using for your template.

You need to append "display:inline-block" to the css for #logo on line 129 and create a new line to define the taglineWrapper eg

/*top middle*/
#logo{margin:10px 0;display:inline-block;}
#taglineWrapper{display:inline-block;}

NOTE: Make a backup of your css file before you change anything. Also look at using the "Clone a Template" plugin to make your own version of the template and not be editing the master responsive classic template.

Bailey
OldNGrey

Thank you. I tried adding the code in my css but it didn't work. Banner still shows under the logo

[dbltoe]

It would help if you could leave the banner up there long enough for us to see what the code looks like.

[godin5150]

It would help if you could leave the banner up there long enough for us to see what the code looks like.

I put a banner back up. The site is active and it doesn't look good so I can't leave it up to long. Thanks for taking a look.

[simon1066]

I put a banner back up. The site is active and it doesn't look good so I can't leave it up to long. Thanks for taking a look.

There may be better ways but a quick one would be to add this to your stylesheet

#bannerTwo {
  float: right;
  margin-left: 85px;
  margin-bottom: 30px;
}

Adjust the margins to suit.

If you want the logo and banner centered then add the bit in red

#logo {
margin: 10px 0;
display: inline-block;
text-align: center;
width: 100%;
}