Creating a responsive logo
-
-
- Luigi Simonetti
- Newbie
- Posts: 13
- Thanks: 0
-
hi, I have a problem with the configuration of the logo, I replaced the logo following your instruction but now the menu is no longer aligned. I tried to intervene in the css but I have not gotten results
www.orionlab.it/rms
-
-
-
- Jean Tan
- Sr. Rocketeer
- Posts: 103
- Thanks: 1
- Hi I do not know anything when it comes to changing codes or whatsoever. I Am using Graffitto and needs the logo to be big and longish. I have already put in the ideal logo here. BROKEN LINK REMOVED but i need the top menu to still fall under the longish logo nicely and change the colour of the main background to a colour that is not in the emplate. Where can I pay someone to do it for me?
- Last Edit: 8 years 11 months ago by Kat05.
-
-
-
- Karen Dunne
- Hero Rocketeer
- Posts: 441
- Thanks: 4
- Principal at Maven Design Studio
-
Hi Andrew,
Start with turning off the logo from the template manager and create a custom HTML module instead. This instruction is presented as the first entry on this thread:
MrT wrote: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...In your case, the img src would be: "/2013/images/dg-words-long.gif"
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 - don't tell me the "O" is missing on graffito ! :shock:<div class="rt-image rt-center"><img src="templates/rt_graffito/images/logo/logo.png" style="border-style: none;" /></div>
This logo will now behave in a responsive manner.
Regards, Mark.
Assign the module to the top-a position instead of header-a so that it will be above the menu. This may not appeal to you in terms of the look because the logo will now be outside the white area where the menu is assigned but it is one option in dealing with a logo with a large width.
Cheers,
Karen -
The following users have thanked you: Hunter Willis
-
-
-
- Anthony Kirkham
- Newbie
- Posts: 14
- Thanks: 0
-
Hello,
If anyone could help me, I'd really appreciate it. This is not an urgent issue, rather it's just a small thing that could do with some fine tuning.
I've integrated the responsive logo to my demo site: www.where.aretheynow.com/ and played around with the custom CSS in order to position the menu and logo:
/* logo resp. mod */ #rt-header .rt-grid-2 { padding-left: 50px; padding-top: 6px; } #rt-header .rt-grid-10 { max-width: 900px; left: 50px; } /* logo resp. mod */
The only problem (and it really is minor), is that when I go to a half page size, the logo isn't centered inside the header container since the menu moves. Is there any CSS that I can put in that would help solve this?
I appreciate any help that you could provide!
-
-
-
- Anthony Kirkham
- Newbie
- Posts: 14
- Thanks: 0
- Thanks Henning! It worked like a charm. :cheesy:
-
-
-
- Darrellr
- Jr. Rocketeer
- Posts: 42
- Thanks: 0
-
Great solution. Works well for me...
but even though I used the 'noblock' module class suffix, a faint border appears around the edge of the logo image from the module I'd created...
I use a transparent gradient image for a logo that works well with the background template image so no border around it would be preferred... How can I remove that?
I've included a screen shot that shows the edge that is visible(both on the right and left side of the image).
-
Time to create page: 0.063 seconds