logo centered and responsive

Hello,

My case is, that I had moved the logo centrally and theoretically I wanted it having as much width as the content has above it. But I've just realized that my solution isn't ok with the responsive attribute (I used numeric margins and width).
If I use my logo to the top position for the banner, I will "lose" the "click" to the home page.

I would appreciate any help,
thank you in advance

Could You post an url to Your site and small drawing of how the logo should look like?

Could You post an url to Your site and small drawing of how the logo should look like?

Off course! http://www.anelkistiras.gr
I would just ant the logo be between the left sidebar and the right one, where the content is. Anyway this is the drawing for the desired place


thank you again

Ok. First thing to do - go to template settings - features tab and change logo type to image.
After that please select your logo image in next field.

When this will be ready You can either search for "how to create responsive image" - and max-width and max-height should be the things You are searching for, or write back and Ill try to help You further.

Ok. First thing to do - go to template settings - features tab and change logo type to image.
After that please select your logo image in next field.

When this will be ready You can either search for "how to create responsive image" - and max-width and max-height should be the things You are searching for, or write back and Ill try to help You further.

Well

thank you first of all for your suggestions. Finally I managed something with another "road"- exploiting the responsive design that you have in another module positions. In my case in "top1" position.
So I placed a banner (or a custom html module) with my pic- logo in this (top1) position and then I have the rest (horizontal navigation and the content).

But I noticed one- two disadvantages with this solution. The "login" position- above the right sidebar- must be cancelled, so the login form must be moved in the sidebar position (otherwise "gkContentWrap" is starting from the login position and after) Ok? when this is happening, I don't have the gk i frame with the login form, just a simple static login form.

Well, you can ask me,why you don't place your logo-banner to the banner position? well because this position doesn't have a responsive design from the start! i think this is a bug in the template, you can check it. (Also the menu in the left sidebar doesn't show at all in a small window - i've just minimized it, i don't have a smart phone to check it for sure)

The second disadvantage is that now the logo of my site loads incredibly slowly, in contrast with your original position for it.

And for the records, I didn't manage to make the picture responsive. I used this code from http://www.sitepoint.com/css3-responsive-centered-image/
#gkLogo img {
position: absolute;
max-width: 80%;
top: 0%;
left: 18%;
}
the picture increases and reduces, as I play with the size of the browser, but when I have resolution 1240X1024 is the desirable place, when i have 1024px goes again near to the sidebar -there isn't something that i could "stop the width" in the end of the content. ( I din't even continue to :empty parameter)

this is my story until now any other suggestion would be more than welcome

Its getting complicated
1. From the things I can tell there are a lot of changes on Your site. If You will look on original Magazine template, You will see, that when #gkExtraMenu is hidden (when browser width is less than 1030px) the "mobile menu" in top left corner should appear (#gkMobileMenu) - it is there - on your site, but its graphic is missing, so noone knows its there.
2. I would strongly recommended to keep logo in its oryginal place and write correct css declarations (with media queries) to work with its size. It was not supposed to act this way, as logos are usually small graphics, and one presented on your site would suggest to use html and css to create that effect.
3. For testing of mobile layout - this template uses media queries, soe You can simply resize browser to check how on different bowser widths the layout will look like.

Its getting complicated
1. From the things I can tell there are a lot of changes on Your site. If You will look on original Magazine template, You will see, that when #gkExtraMenu is hidden (when browser width is less than 1030px) the "mobile menu" in top left corner should appear (#gkMobileMenu) - it is there - on your site, but its graphic is missing, so noone knows its there.
2. I would strongly recommended to keep logo in its oryginal place and write correct css declarations (with media queries) to work with its size. It was not supposed to act this way, as logos are usually small graphics, and one presented on your site would suggest to use html and css to create that effect.
3. For testing of mobile layout - this template uses media queries, soe You can simply resize browser to check how on different bowser widths the layout will look like.

thank you again for your suggestions, i will consider them.
But I didn't have an answer about the banner position. If I want to place an image or banner that will follow the width of the content above? why this position doesn't have the responsive attitudes like the others above?

thank you in advance

Try "top1" position - I think it should act exact as You wanted.