[Jyotirmoy Dey]

Hi, my site http://www.thesaladguy.cool . I want to resize the size of logo. But if I’m doing so, then it is creating issue with small screen size, its overlapping the silver text, and is there an option to customize mobile view? How do I disable the slider for mobile device? Thanks

[Skandha]

@jyo: Hello there,
Go to => Appearance => Customize => Additional CSSh and add the following CSS Code.

@media screen and (max-width: 64em) {
	.custom-logo {
	    max-width: 100px;
	}
}
@media screen and (max-width: 568px) {
	.custom-logo {
	    max-width: 50px;
	}
}

Let me know if this solves your issue.
Kind Regards,
Skandha

[Jyotirmoy Dey]

Thanks. It worked.

How to make the slider more mobile friendly? The slider overshadows my logo in mobile view. Can the slider image me a little smaller?

[Skandha]

@jyo: Hello there,
At my end the slider image seems to be showing up fine even on mobile screens. Can you attach me a screenshot of where the slider image is overlapping the logo?

Kind Regards,
Skandha

[Jyotirmoy Dey]

Also check this, the text overlaps if the length of the viewport is small.

[Jyotirmoy Dey]

https://ibb.co/txZDPb6

[Jyotirmoy Dey]

Any help here please?

[Skandha]

@jyo: Hello there,
Please replace the above CSS Code with the following CSS Code

@media screen and (max-width: 568px) {
	.custom-logo {
	    max-width: 50px;
	}
}
@media screen and (min-width: 568px) {
	.custom-logo {
	    max-width: 100px;
	}
}

This should resolve your issue on devices.
Let me know if this works out!
Kind Regards,
Skandha

[Jyotirmoy Dey]

Well this just fixes the logo to a small 100px which I didn’t want. But the first solution works. I will use media query to replace the logo with the viewport size.

Another area I require help is, the MENU. How do I make the pages in my menu visible outside individually instead of grouping all inside the MENU button. I want my SHOP and EXPERIENCE menu to be independently visible and not inside MENU.

[Jyotirmoy Dey]

Tried putting a monogram logo for smaller viewport

@media screen and (max-width: 568px)
{
.custom-logo {
background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png”) !important;
max-width: 250px;
}

but its not working. How do I have a different logo at a different screen size?

[Jyotirmoy Dey]

@media screen and (max-width: 487px) {
.custom-logo {
background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png”) !important;
}
}

pardon the above code.

[Skandha]

@jyo: Hello there,
To make menu items visible
Go to => Appearance => Customize => Theme Options => Menu Options => Menu Style => Select Classic and Publish.

I am afraid it is not possible to upload two logo images for different view ports. If you really need it I suggest you to hire a customizer.

Kind Regards,
Skandha

[Jyotirmoy Dey]

I did the change to classic menu, nothing changed at all?

[Jyotirmoy Dey]

Why is that a limitation when i can edit my style.css?? I can add a media query to display a monogram of my logo in a smaller screen and mobiles. Can you please elaborate?

[Skandha]

@jyo: Hello there,
If you have made any changes to the style.css file, I suggest you not to as all your changes will be lost when you update the theme to newer versions. Please use the Additional CSS section to add any CSS Codes.

It is very difficult to add a different logo image and require lots of customization to be made. As you can see using the CSS background-image: url(“https://thesaladguy.cool/wp-content/uploads/2020/07/TSG_Text-Only-Logo-Inverted-4.png"); is not enough.

Kind Regards,
Skandha

[Jyotirmoy Dey]

That is the reason wordpress has option to create child themes! Please tell me the changes for the css as I feel having purchased the theme should give me the flexibility to change the codes. And, though a simple media query works for other themes, if there is something else required for your particular catch theme I would appreciate you telling me where the necessary changes are to be made even if you cant help me with the code itself.

[Jyotirmoy Dey]

Atleast guide me to the html file that contains the logo in the markup. I will handle the css part.

[Jyotirmoy Dey]

Awaiting your response eagerly.

[Jyotirmoy Dey]

Anything?

[Skandha]

@jyo: Hello there,
Since there is only single option to add a logo in the header you will need to use CSS to use another logo of your choice. As much I would like to help you on this issue, this is beyond our support scope. So, If you really need this I suggest you to consult a professional.

Let me know if you have any other issues.
Kind Regards,
Skandha

[Author]

Posts