Logo / Text Logo is Getting Hidden

Support
#1

I am trying your lawyer theme. It seems that the logo or even the text logo is getting hidden and not visible. Even on your demo site, it is the same issue.

1 Like
#2

Hello Abhinav,

I have just checked the imported demo on your site and logo is displaying correctly on my end:

Would you mind clearing your site and check again?

Let us know how it goes.

#3

The thing is I tried it in 2 different browsers - Safari and Chrome and it is the same in both the places. And I also tested on 2 different laptops. I still don’t see the logo. Even if I put a text logo it is not visible. See the picture.

What do you mean by clearing the site?

#4

Hi Abhinav,

The logo is only displayed on larger displayed and on mobile devices, that’s the initial setup but you can always change it by going to Theme Options > CSS and change this line

@media (min-width:1441px){

to this line

@media (min-width:1425px){

It seems we have the same Macbook screen width, hence I recommend the 1425px. But you can change and decrease it more.

Hope this helps.

#5

Hi Rad…

This works.

Is there a way to make it responsive for all types of screen sizes. Because even after I changed, my browser was not set to full screen and it was not coming up. After I maximized it, it showed up. So I suspect not all my readers will be using full screen. So how to make it responsive.

Abhinav

#6

Hello Abhinav,

This line @media (min-width:1441px){ means that the css will only be applied if the screen size is greater than 1441 pixels. If you want to include the smaller screen sizes, you will have to update it into this:

@media (min-width:1200px){

Feel free to experiment with smaller values if you have to.

#7

So what is the peril of setting it too low. I mean there is a reason why you would put that condition.

#8

Hi Abhinav,

It’s because that logo is added in a not natural way, you can see how that logo is positioned and rotated, because of that, unfortunately, that logo is not responsive (that’s why its hidden under 1440px). This demo was originally designed for PRO (with header builder), that is why this header required custom CSS to achieve in X.

So if you want to have the normal logo on this screen size (min-width: 980px) and (max-width: 1440px), please add this to Theme Options > CSS

@media (min-width: 980px) and (max-width: 1440px) {
.x-brand {
    display: block;
	}
}

This is the normal logo image that you set under Theme Options > Header > Logo, this will show right beside the menu.

Hope that helps,
Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.