The logo from template manager is not designed to be responsive as it is being put in as a background image via CSS. This is how to create a responsive logo...
1. turn OFF the logo. template manager > rt_graffito - default > style tab > logo - OFF and save
2. create a new custom HTML module in module manager, assign to header-a position and put this code in it....
Obviously use your own logo url
<div class="rt-image rt-center"><img src="templates/rt_graffito/images/logo/logo.png" style="border-style: none;" /></div>
3. Add module class suffix " nomarginall nopaddingall" to that module (note leading space but don't add speechmarks). This will ensure that the logo can utilise the maximum space available.
REMEMBER: Make sure that in your Gantry layouts the header-a position is wide enough to contain the width of your image. If the module size is smaller than image width then in desktop and large modes your logo image won't be displayed full width.
This logo will now behave in a responsive manner.
Last Edit: 5 years 1 month ago by MrT.
The following users have thanked you: DanG, Bay Area Jenn, Mrs. SaBe, Jeremy Duncan, D.Bell, Jorge Rumbau, Kike Hernandez, Thomas Condé Hansen
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.