We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Mobile logo on Chrome takes up whole width - offcanvas pushed beneath?

Featured Lock Resolved Issue
Hi,

We've noticed that on mobile, the logo of this website is too wide for the screen using Android 10/Chrome.

Screenshot attached - I have tried using lots of different logo image sizes for mobile but they all do the same thing. We are using Boxed layout if that matters, with the standard Travus heading layout.

Can anyone help? It seems to be using the same logo file as the desktop logo settings.

Thanks,

Chris

Attachments (1)

  • 82344904_2243829655911373_841573664552910848_n.jpg
    82344904_2243829655911373_841573664552910848_n.jpg 173.7 KB

9 Answers

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
Sorry for the delayed response!
Please use the following code snippet to your custom CSS:

@media (max-width: 992px){
#sp-header.header-sticky .logo img {
height: 20px !important;
}
}


Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn

Best Regards

Rashida Rahman - Staff

More than a month ago #Permalink
Hi,
Thanks for your query.
Would you please share your site URL here?
However, you may set it up from logo grid settings within the layout builder.
Please go to Extensions>Templates>styles(Click on template name)>Template Options>Layout builder
https://prnt.sc/qpdydd
https://prnt.sc/qpdynv
[attachment]layouot builder logo settings.png[/attachment]
https://prnt.sc/qpdzl0
[attachment]grid of logo.png[/attachment]

Hope it helps!

Best Regards

Chris

More than a month ago #Permalink
Hi,

PM sent with the URL - I am using the standard travus header so no changes have been made to any of the row/column settings for the logo and menu area.

Thanks,

Chris

Chris

More than a month ago #Permalink
Hi Rashida, did you get my PM OK?

Kind regards,

Chris

Chris

More than a month ago #Permalink
Super thanks, I'll add that in ASAP :)

Chris

Chris

More than a month ago #Permalink
I also added:

@media (max-width: 992px){
#sp-header .logo img {
height: 30px !important;
}
}

So the logo was sized right before scrolling/using the sticky header :) (30px worked better as a height).

Rashida Rahman - Staff

More than a month ago #Permalink
Super thanks, I'll add that in ASAP :)

Chris


You are welcome:)
Yes, you can play with the height as you want to see!

Chris

More than a month ago #Permalink
Thanks again :)


There are no replies made for this post yet.
Be one of the first to reply to this post!

123

Templates

327501

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us