Logo in slider on front page

Hi Admin guys,

I like to use the free version of Sydney but wonder if it is possible to add a logo (symbol) above the text in the slider.

Hello there,

To achieve such that objective, try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.header-slider .contain{
   background-image: url('http://yoursite.com/path/to/your/logo.jpg');
   background-size: 100px 100px;
   background-repeat: no-repeat;
   background-position: top center;
   padding-top: 100px;
}

Adjust the values accordingly.

Replace http://yoursite.com/path/to/your/logo.jpg with the URL path to your image. You would upload it to the media library (Dashboard > Media > Add New).

Regards,
Kharis

Hello,

I tried this CSS code and it works great on desktop screens! But since the logo size is so big (background-size: 750px 311px;), it doesn’t works properly on smaller devices. How can this logo be responsive so it even works on smaller devices?

healyourbody.nu

If it’s possible it had been great to have the logo in the same way as this site has: www.wild-confetti.com , but larger size of the logo and centered instead.
I saw a topic regarding this (www.wild-confetti.com) here in athemes forum:
Responsive logo and video

I really hope you can help me!
Thank you in advance!

Hello there,

To target specific CSS code on smaller screen, you can use media query. For example:

    @media only screen and (max-width: 800px) {
      .header-slider .contain { 
        background-size: 80px 100px;
      }
    }

Regards,
Kharis

Hi there,

Thank you for your reply!
Unfortunately, I do not get the CSS code to work …

Do you have any other suggestion of CSS code that I can use?

Thank you!

Try adding !important to set highest priority as it might be overridden.

    @media only screen and (max-width: 800px) {
      .header-slider .contain { 
        background-size: 80px 100px !important;
      }
    }

Regards,
Kharis

1 Like

Hi again,

Thank you for your reply!
I can not get the CSS code to work. It doesn’t seems that the CSS code minimize the image - it seems rather that the code cut off the image instead.

Do you have any idea?

Hi again,

I have tried another CSS code and it looks to works fine, but the image-logo is to small on smaller devices. Can I add som CSS code to get the image-logo larger on smaller devices (tablet/mobile)?

.text-slider .maintitle {
width: 95%;
padding-top: 420px;
background-image: url(‘https://your-image-logo-here.png’);
background-repeat: no-repeat;
background-size: 56%;
background-position: center;
}

.text-slider .maintitle:after {
background-color: transparent;
}
.text-slider .maintitle{
padding-bottom: 5px;
}
.text-slider .subtitle {
padding-top: 0;
}

Please, let me know!
Thank you in advance!

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 800px) {
      .text-slider .maintitle {
        background-size: 100%;
      }
    }

Regards,
Kharis

1 Like

Hi again Kharis,

That extra CSS code you suggested seems to work fine!! Thank you very much for your help!! :slight_smile:

It is something that isn’t 100% right in the following CSS code, but I can’t figure out what it is - it’s like the image is “cut off” on the top of letter O … I don’t know what I am doing wrong … it looks like it is something that isn’t 100% right with either the padding-top or width, or maybe it’s something with the default code, I don’t know …

Can you, please, check the CSS code and see if something is wrong?

.text-slider .maintitle {
width: 70%;
padding-top: 520px;
background-image: url(‘https://your-image-logo.png’);
background-repeat: no-repeat;
background-size: 85%;
background-position: center;
}

.text-slider .maintitle:after {
background-color: transparent;
}
.text-slider .maintitle{
padding-bottom: 5px;
}
.text-slider .subtitle {
padding-top: 0;
}

Thank you very much for your help!!

Hello there,

Try replacing this line:

   background-size: 85%;

with:

  background-size: contain; 

Regards,
Kharis

1 Like

Hi again Kharis!

It works perfect!! Thank you so much for your help!! :+1::+1::+1: :slightly_smiling_face:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis