Docs

[ajeshabraham]

Hi

I am working on a new site for a client.

I have installed the http://theme.co/x/demo/expanded/education/ demo.

But my logo is bit longer vertically. Is there a way I can choose to have a different logo when the navbar changes to the hamburger icon?

Regards
Ajesh

[Thai]

Hi Ajesh,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 979px){
    .x-brand.img {
        background: url(http://placehold.it/200x50) no-repeat center center;
        background-size: 100% 100%;
    }
    .x-brand.img img {
        opacity: 0;
    }
}

Replace http://placehold.it/200x50 URL with your image URL.

Hope it helps 🙂

[ajeshabraham]

Partially helped.

I have put another logo. But it looks stretched. it is not a square dimension logo. Is it because of the 100% 100% in the code?

Also how can I reduce the size of the logo bar and navbar in the small screen view.

Basically the site has a fixed left menu. But on small screen the navbar goes on top. But I am not sure how to fix the size for the navbar when it goes to the top.

[Lely]

Hello There,

To assist you better with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[ajeshabraham]

This reply has been marked as private.

[Jade]

Hi Ajesh,

I tried to access the site and logged and but I get this message that says:

You are temporarily locked out

You have been temporarily locked out of this system. This means that you will not be able to sign-in or use several other features that may compromise security. Please try back in a short while.

Return to the site home page
Attempt to return to the admin login page (you may still be locked out)

If you are a site administrator and have been accidentally locked out, please enter your email in the box below and click "Send". If the email address you enter belongs to a known site administrator or someone set to receive Wordfence alerts, we will send you an email to help you regain access. Please read this FAQ entry if this does not work. 

Would you mind double checking the logins so that we could access the site? Thank you.

[ajeshabraham]

Wordfence is turned off.

[Christopher]

Hi there,

Please add this code :

@media (max-width:480px){
.x-brand img {
    width: 39%;
}
}

Hope it helps.

[ajeshabraham]

Hi Christopher
Did you mean to remove the code you suggested previously and add this one instead.

I did add them without deleting the code you suggested in the fist response. But it still is not working.

[ajeshabraham]

This reply has been marked as private.

[ajeshabraham]

This reply has been marked as private.

[Paul R]

Hi,

Please change the code given in #910796 with this

@media (max-width: 979px) {
.x-navbar .x-brand.img {
    background: url(http://ytu.edu.au/wp-content/uploads/YTU_Logo-long.png) no-repeat center center;
    background-size: contain;
    height: 100px;
    width: 400px;
    margin-top: 0;
}

.x-navbar .x-btn-navbar {
    margin-top: 35px;
}
.x-brand.img img {
       display:none;
        opacity: 0;
    }
}

Hope that helps

[Author]

Posts