Logo to replace header text and tagline

Have you tried uploading a header image through Appearance > Header? It should be at least 990px wide by 180px high, and in a proper image format like PNG, GIF, or JPG.

The site title and tagline are changed under Appearance > General.

I reiterate. I want to replace the header text and tagline with my logo. I don’t want the logo to appear under the navigation bar but where the header text and tagline is.

Hi

if i have this right you want to put your logo at the top of the page above your nav

the way i had to do that was move the code above the nav code on my header.php
but before you do this you want to back your site up just in case you mess it up to remove the header and tag text go into appearance> header and un tick the box for header and tag text.

have a look at this and see if this is what you want

[Irrelevant link redacted]

Wazza, are you sure you linked the right website?

Yes I want to put the logo ABOVE the navigation bar.

I tried to read the tutorial on making a child theme but it’s way too complicated for me. Thus I would like to know if it’s possible to simply enter the CSS into Custom CSS?

you can try this first you have to insert your header img in Appearance > Header then go to you custom css file and try this you will have to look at your code to find the right class just move the img up then your nav done with the bottom and top px

hope this helps you

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {

  position: relative;
  bottom: 180px;
}

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {

  position: relative;
  top: 180px;
}

[added code tags – moderator]

HI wazza, I’m sorry but I don’t understand what you mean by “just move the img up then your nav done with the bottom and top px”. Can you please use punctuation?

It can be done with CSS, but the logo won’t be clickable like your site title; is that OK? Just add this to the end of your custom CSS:

#site-title, #site-description {
   font-size: 0;
}
#site-title:before {
   content:url(https://www.temasekclub.com.au/wp-content/uploads/2013/08/box-singapore.jpg);
}

Change the URL value to point to whatever image file you’d like. The first CSS rule hides the title & tag line by setting the font size to zero, then the second rule inserts the image before the site title.

By the way, you have a syntax error in your custom CSS. I see this at the end of your custom CSS:

.three-column #secondary {
	width: 44.89%;

.widget-area,
.widget-area input {
	font-size: 15px;
	line-height: 18px;

You need to add the closing brace } for each of those rules, or those CSS rules, and any CSS which follows, will not be read.

If, however, you would like your logo to be clickable, i.e., it takes your user back to your home page (the logo for most sites do this), you can easily replace the site title with a clickable logo by inserting a single line of JQuery code. Since you don’t want to create a child theme, you can add this code using a scripting plugin, like Header and Footer:

<script>
jQuery(document).ready(function($){
   $("#site-title span a").html('<img src="https://www.temasekclub.com.au/wp-content/uploads/2013/08/box-singapore.jpg" />');
});
</script>

This will replace the contents of the site title with an image (again, replace the src value with the file you want to point to). You will also have to hide the site description with this CSS:

#site-description {
   display: none;
}