Removing the logo

Support
#1

Hi. On this page: http://copilates.jarvendesign.se I want to remove the logo that came from the theme template. I have removed the picture that was in the header section in theme options - but the picture is still there.
Can you help me?
Tomas

#2

Hi Tomas,

You can do it by adding this code in X > Theme Options > CSS:

.x-brand {
    display: none;
}

Hope this helps.

#3

Hi. I added the code but the logo is still there.
Tomas

#4

Hi Tomas,

Please try going to X > Theme Options > CSS:

then find and remove this block of code:

.site:before, .site:after {
    content: "";
    display: block;
    position: absolute;
    background-image: url(http://media.copilates.jarvendesign.se/2020/01/logo.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 107px;
    height: 24px;
}

Hope this helps.

#5

Worked better. Thanks.
Tomas

#6

You’re most welcome, Tomas.

#7

Hi.
My customer wants me to add their logo. But since I removed the previous css code the new logo doesn’t appear. I have uploaded it but cannot see it.

So - how can I use my own logo?

Tomas

#8

Hey Tomas,

In that case, add the code Jade suggested that you remove back. Then, notice the following line:

background-image: url(http://media.copilates.jarvendesign.se/2020/01/logo.png);

Change the URL with the new image URL.

Hope that helps.

#9

Ok. thanks.
That put the logo in place.
But how do I position it?
I would like it to be positioned up to the menu “boka”
I have tried in the css code to change the width and height - but it really didn’t work the way that I expected.

Tomas

#10

I managed to add a css code that made it look better on my pc.
But, when looking at the page on a mobile phone the new logo - isn’t that good looking.

Can you help me?

Tomas

#11

Hi Tomas,

You can create another code block based on the code you have just written and wrap it in a media query so that it will just target the mobile.

For example:


@media (max-width: 480px) {
    /* The code you have written with the adjustments*/
}

Hope this helps.

#12

Hi.
Ok. So now I have two code blocks that looks like this but the problem persists on the mobile phone (I have probably written something wrong):

.site:before, .site:after {
content: “”;
display: block;
position: absolute;
top: 130px;
background-image: url(http://media.copilates.jarvendesign.se/2020/02/Nyköpings-Danscenter-NY-svart-scaled.gif);
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;

}
@media (max-width: 480px) {
content: “”;
display: block;
position: absolute;
top: 130px;
background-image: url(http://media.copilates.jarvendesign.se/2020/02/Nyköpings-Danscenter-NY-svart-scaled.gif);
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;
}

#13

Hi Tomas,

Please try:

@media (max-width: 480px) {
     .site:before, .site:after {
        content: "";
        display: block;
        position: absolute;
        top: 130px;
        width: 200px;
        height: 100px;
    }
}

Hope this helps.

#14

Hi.
Now I have these two code blocks.
On my MAC screen I have two logos: http://copilates.jarvendesign.se/events/pbt/?occurrence=2020-02-05
And on my iPhone and iPad I have a logo that is placed over the headline since the top: 70px; is placed there. If I change this value to a smaller number the logo disappears behind the menu.

And I can also see that the logo is being placed over the headline on my computer if I resize the browser. Is there any way to place the logo above the headline but below the menu?

Tomas

#15

Hey Tomas,

Regarding the 2 logos, remember that in our demo, there really are 2 logos. 1 for the header and 1 for the footer (.site:before, .site:after). The issue now is you added top:130px. It positioned both images to the top. Please Remove the top declaration or separate the position for .site:before and .site:before like

.site:before {
  top: 130px;
}
.site:after {
  bottom: 130px;
}

You can even then add z-index to each of them so the logo stacks on top of the mobile Navbar. The above code should look like this:

.site:before {
  top: 130px;
  z-index: 9999;
}

Insert them in a media query to position per screen size.

Hope that helps.

#16

Hmm. Ok.
Managed the below code.

  1. It works fine on the computer
  2. It works in portrait mode on the phone but not on landscape (then it is not possible to scroll)
  3. It doesn’t work on the iPad on either mode (and right now there is a problem to scroll on the page on an iPad)
#17

Hello @TomasJarvling,

Please clear your iPad browser’s cache or use private browsing mode or incognito mode and test the site again.

Hope this helps.

#18

Hi.
I tried on my iPhone and cleared the cache. When having the iPhone upright it works fine and the logo is there. But when I turn the iPhone to landscape mode there is a few seconds lag before I can start to scroll.

And also - is there a media query that I can set so that the logo appears on iPhone landscape mode and on my iPad. It is probably there but hidden but I cannot seem to get it visible.

Tomas

#19

Hey Tomas,

The lag is because the .site:after was not positioned as suggested. You need to add padding to the site container for your setup now. Add the following code in Theme Options > CSS.

.site {
    padding-bottom: 140px;
}

Regarding the logo not showing in landscape, that is because your media query is for portrait view only @media (max-width: 480px). Change 480 to 979.

Hope that helps.

#20

Perfect.
Now it works perfect on the computer and the iphone.
Sorry for asking so many questions but…
The ipad. I cannot see the logo on the ipad. Is there any way to media query the code for the ipad?