0

I'm using the ultimo theme, and have some issues with header logo position.

My logo is a square box, with some graphics 'sticking out' on the left. Let's say it looks like this:

http://goodlogo.com/images/logos/calvin_klein_logo_2623.gif

The K is the edge of the box, and the C is ‘sticking out’.

In the default layout, this alignment looks no so good – the logo is too far right. What I need is for the edge of the box (K), to be aligned with the left border of the page body/menu nav.

If I force the CSS like this:

.header .logo-wrapper { position: relative; left: -15px; }

It kind of works, moving the logo a little to the left and the alignment looks as I’d hope.

But the responsiveness breaks. I need to somehow adjust the css when the small sizes kick in.

How can I do that? What is the best way to move the logo left?

(I know this might be theme specific - but not sure, so asking anyhow. I have a feeling this is more about responsive-theme handling in general)

update: here's a graphic to show what I mean: https://s29.postimg.org/ioh9v58kn/example.png

1

Your approach for large screens is correct, but I would suggest using negative margin instead of left positioning. Now, when the screen is smaller, your content container will ocupy all the width of the screen, so you cannot use a negative margin anymore because the logo will go outside the container, i.e. outside the screen.

In this case you will have to reset the left margin to 0 like this:

.header .logo-wrapper { margin-left: -15px; }
media only screen and (max-width: 768px) { // You can change the breakpoint to whatever you want
    .header .logo-wrapper { margin-left: 0px; }
}
  • Hi, thanks. In the end, the following worked nicely it seems: media only screen and (min-width: 1280px) { .header .logo { margin-left: -15px; } } /* 1280px <= width 1279 and 1024*/ media only screen and (min-width: 768px) and (max-width: 1279px) { .header .logo { margin-left: -9px; } } – egg Jun 20 '14 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.