Move an image in the header

General CSS queries can be asked in general CSS forums such as;
https://csscreator.com/forum
https://www.cssforum.com.pk/
https://css-tricks.com/forums/
https://www.welovecss.com/
https://www.codingforums.com/

Thanks for the help, but I would rather ask it here – I am not a member of any of the other forums.

I would start by wrapping all the social media icons in a div with a class or id so that you can target them separately in the CSS code.

Not sure how to.

All I want is for this image

<img src="https://www.technologybloggers.org/images/Technology-Bloggers-Logo.png" alt="Technology Bloggers Logo" width="85" height="85" border="0">

to display in the centre of the page, like so: https://www.technologybloggers.org/images/idea-technology-bloggers-header.jpg

Stylesheet code: https://pastebin.com/sFy2sUAX

Page header code extract from header.php

<div id="branding" role="banner">

				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>

				<<?php echo $heading_tag; ?> id="site-title">

					<span>

						<img src="https://www.technologybloggers.org/images/Technology-Bloggers-Logo.png" alt="Technology Bloggers Logo" width="85" height="85" border="0"><a href="<?php echo home_url( '/' ); ?>" title="Go to the homepage" rel="home"><?php bloginfo( 'name' ); ?></a><br /><a href="https://www.facebook.com/TechnologyBloggers/" target="_blank" title="Technology Bloggers Facebook Page"><img class="f"
onmouseover="this.className='fa'" onmouseout="this.className='f'"
src="/images/img_trans.gif" alt="Technology Bloggers Facebook Profile" width="40" height="40"></a><a href="https://twitter.com/TechBloggers" target="_blank" title="Technology Bloggers Twitter"><img class="t"
onmouseover="this.className='ta'" onmouseout="this.className='t'"
src="/images/img_trans.gif" alt="Technology Bloggers Twitter Profile" width="40" height="40"></a><a href="https://plus.google.com/u/0/105633094957689395216/" target="_blank" title="Technology Bloggers Google Plus Profile"><img class="g"
onmouseover="this.className='ga'" onmouseout="this.className='g'"
src="/images/img_trans.gif" alt="Technology Bloggers Google+ Profile" width="40" height="40"></a><a href="https://www.youtube.com/TechnologyBloggers" target="_blank" title="Technology Bloggers YouTube"><img class="y"
onmouseover="this.className='ya'" onmouseout="this.className='y'"
src="/images/img_trans.gif" alt="Technology Bloggers YouTube Profile" width="40" height="40"></a><a href="https://www.technologybloggers.org/feed/" target="_blank" title="Technology Bloggers RSS Feed"><img class="r"
onmouseover="this.className='ra'" onmouseout="this.className='r'"
src="/images/img_trans.gif" alt="Technology Bloggers RSS Feed" width="40" height="40"></a>

					</span>

				</<?php echo $heading_tag; ?>>

				<div id="site-description"><strong>Read | Contribute | Benefit</strong><br />A whole community of technology bloggers</div>

			</div><!-- #branding -->

I am sure it is really simple, I just don’t understand!

If anyone could tell me where to stick the code I would be most grateful ??

Okay, first make a copy of your header.php and style.css files someplace safe (i.e. local computer) – just in case this doesn’t work and we need to go back to the current version.

Then replace the section you posted above with this:

<div id="branding" role="banner">

				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>

				<<?php echo $heading_tag; ?> id="site-title">

						<img id="logo" src="https://www.technologybloggers.org/images/Technology-Bloggers-Logo.png" alt="Technology Bloggers Logo" width="85" height="85" border="0"><a href="<?php echo home_url( '/' ); ?>" title="Go to the homepage" rel="home"><?php bloginfo( 'name' ); ?></a>

<div id="socialicons">
						<a href="https://www.facebook.com/TechnologyBloggers/" target="_blank" title="Technology Bloggers Facebook Page"><img class="f"
onmouseover="this.className='fa'" onmouseout="this.className='f'"
src="/images/img_trans.gif" alt="Technology Bloggers Facebook Profile" width="40" height="40"></a><a href="https://twitter.com/TechBloggers" target="_blank" title="Technology Bloggers Twitter"><img class="t"
onmouseover="this.className='ta'" onmouseout="this.className='t'"
src="/images/img_trans.gif" alt="Technology Bloggers Twitter Profile" width="40" height="40"></a><a href="https://plus.google.com/u/0/105633094957689395216/" target="_blank" title="Technology Bloggers Google Plus Profile"><img class="g"
onmouseover="this.className='ga'" onmouseout="this.className='g'"
src="/images/img_trans.gif" alt="Technology Bloggers Google+ Profile" width="40" height="40"></a><a href="https://www.youtube.com/TechnologyBloggers" target="_blank" title="Technology Bloggers YouTube"><img class="y"
onmouseover="this.className='ya'" onmouseout="this.className='y'"
src="/images/img_trans.gif" alt="Technology Bloggers YouTube Profile" width="40" height="40"></a><a href="https://www.technologybloggers.org/feed/" target="_blank" title="Technology Bloggers RSS Feed"><img class="r"
onmouseover="this.className='ra'" onmouseout="this.className='r'"
src="/images/img_trans.gif" alt="Technology Bloggers RSS Feed" width="40" height="40"></a>

</div> <!-- socialicons -->

				</<?php echo $heading_tag; ?>>

				<div id="site-description"><strong>Read | Contribute | Benefit</strong><br />A whole community of technology bloggers</div>

			</div><!-- #branding -->

We’ll still need to add CSS, so don’t freak if it looks terrible right now :).

Trying it out on my test site first: https://www.technologybloggers.co.uk/test/

I can give you access to the code if you need – I can create you an account and give you login.

Made the changes suggested, but it looks the same :-/

No worries, let me look at it and work on the CSS…

Thanks ever so much for your help ??

Okay, add this to your CSS:

#branding img#logo {
   float: right;
   margin-right: 200px
}

#branding img {
   float: none;
}

Ha hah!

You are fantastic. I have spend hours (probably 4/5) trying to work it out, failing, attempting to reconstruct the site etc. and you do it in 5 minutes!

Thanks WPyogi, as soon as it is on the main site I am Tweeting that your help made it happen – if that is okay?

Just checking, when I added the code, it looked like this:

#branding img#logo {
   float: right;
   margin-right: 200px
}

#branding img {
   float: none;
}
#branding img{border-top:0px solid #000;border-bottom:0px solid #000;display:block;float:left;}

I changed it to this, and the logo stayed fixed

#branding img#logo {float: right;margin-right:200px}
#branding img{border-top:0px solid #000;border-bottom:0px solid #000;display:block;float:left;}

…is this code okay, or must I keep the exact code you gave?

Once again, my most gracious thanks ??

Oh no, my code is definitely not gospel – LOL! Hardly. Whatever works is great — and your site looks really good too :). I’m glad to be of help… and sure, tweet it if you like. I’ll have an semi-anonymous second of fame on Twitter!! (Hey, one funny coincidence is that I have a cousin named Christopher Roberts! )

I have a horrible eye for perfection, so needed to tweak the code slightly to make the image perfectly central – give or take half a pixel! The code is now live on the main site https://www.technologybloggers.org/

The promised tweet can be found here: https://twitter.com/techbloggers/status/293329584529752064

Whatever works is great — and your site looks really good too ?? – thanks ?? I put a lot of effort into it, and never seem to be happy – always something to teak! I just hope everyone in the community likes it.

You aren’t my cousin are you? ??

By the way, is this your website?
https://www.wpyogi.com/

Once again, thanks ??
Christopher

No, I haven’t actually been in touch with my cousin in years, but I’m pretty sure he still lives in California (as do I). No, that’s not my website — it actually belongs to another moderator – Christine Rondeau. We ended up with that same name quite by coincidence /accident — I’ve thought for a while that I should perhaps change mine…

Anyway, nice job and I understand the perfectionist deal too :). But don’t drive yourself too crazy over it. LOL!

Ah, not in the UK then!

I have been tweaking the name, and just added a shadow under it. Part of me likes it, whilst another part of me thinks it looks a bit odd. What’s your thoughts?