Only show logo with responsive view

Hi jbspropertyibiza. Give this css media query a try. You can adjust the point at which it becomes visible by changing the min-width:

/* display logo only on mobile devices */
@media only screen and (min-width: 920px) {
  h1.site-title {
    display: none;
    }
  }

Sorry where do I put this?

I put it inn the responsive.css and it worked the logo shows on my mobile and not on my laptop but the header size shrunk when I did it https://jbspropertyibiza.com/

On the laptop browser

Oohhhhh I got it, thank you! x

I wouldn’t recommend placing the code in responsive.css. That file will be overwritten if you update the theme. Since you’re not using a child theme I would suggest installing a plugin, like Simple Custom CSS, to handle any css you need to add. Also, I need to take another look at howe the header changes in responsive mode between 920px and 720px. We may need to modify the media query; I’ll get back to you.

So, what I see is a <div id=”locator2″> that contains an image (logo) that is displayed until the viewport gets to 720px; then it is hidden. However, based on the code above, your site-title logo is still visible until the viewport reaches 920px. The result is, between 720px and 920px, both logos are being displayed. I’d recommend changing the media query for one or the other so the visibility changes at the same width.

Yeah for some reason it has stopped working! I guess I put it in the wrong place to begin with,

I just attempted to make a child theme I deleted wordpress altogether, reinstalled it, installed the hueman theme again and created the child theme hueman-child I copied the css I had changed so far to that but it was messed up the fonts weren’t working the same way so I stopped using it and reactivated the main one and copied all the files I had backed up into the theme folder again, but now both the logo’s are displaying at once again even though I still have that bit of code you gave me in my responsive.css I’m really confused.

The reason I asked how to do this in the first place was simply because I couldn’t out how to change the positioning of the logo to the center of the primary sidebar when added from the theme options…

That’s why I added the locator2 div as I wanted to posistion it in the above and in the center of that sidebar, but it looked messed up in mobile view…

I just switched back to the child theme, and the font face isn’t working even though I copied over the entire stylesheet

It appears that the default theme style.css isn’t being loaded so none of the default fonts would be active. Here’s what you might do:
1. Save whatever child theme css, functions.php or other customized theme files you might have.
2. Activate one of the default WP themes.
3. Delete the existing child and parent themes.
4. Download the current v2.2.0 theme from the theme website.
5. Download the pre-configured child theme from the theme website.
6. Install both the parent and child themes.
7. Copy your child theme files back to the child theme directory, overwriting the existing style.css file.
8. Activate the child theme.

Once you get the child theme activated we can use css to position your site-title logo wherever you want it. I don’t think you’ll need a second logo just for mobile screens.

In regards to the logo I changed this:

.site-title a img {
display:block;
max-width:100%;
max-height:60px;
height:auto;
padding:0;
margin-left:40px;
-webkit-border-radius:0;
border-radius:0
}

So it is now in the center of the primary column on my browser, but not in the center on the mobile/tablet

Ill try what you said about the child theme and let you know

Where do I find

5. Download the pre-configured child theme from the theme website.

I can’t find one on their website

Home page, scroll down a bit; you’ll see the download link.