Responsive Logo

[werdnags]

Hi All,

I am newbie to CSS and feel I would like to learn more. I have bought a couple of books and slowly getting to grips with things. I have just discovered this forum and would love to participate.

One thing I have seen and can’t seem to get my head round is the site below. They have a logo at the top but it is also responsive.

Site: Builders Website

Does anyone have any pointers for me as I would like to try this out on a website.

Thanks.

[werdnags]

Sorry Soronbe, as I say I am ‘very’ new to this. I would just like to replicate the logo and it’s responsiveness and not sure where to start!!

I now have a basic understanding but not sure which elements I need to implement this on another site.

[werdnags]

This is my attempt so far Joinery Website

I can’t get the image to stay at the left hand side of the menu and when viewed on a mobile I would like it to vanish.

[Paulie_D]

Actually, I don’t think the logo itself is responsive…the div it’s in is however.

I assume that’s what was meant.

[werdnags]

Yes Paulie, that’s what I am after.

[nixnerd]

Responsive logos are easy cheesy with SVG. Just make an SVG with either illustrator or inkscape (free). Then… just set the width to a relative size. Either percentages or vw will work. I do this all the time.

[nixnerd]

To touch on what Paulie is saying… with SVG you can manipulate the logo path DIRECTLY. It’s not the containing div or any of that… it’s the actual logo path.

[Author]

Posts