CODEWITHSUNDEEP
css
Rik Van Der Wardt
Rik Van Der Wardt

Reputation: 77

How do I move my site logo to the left, outside of it's container

I'm trying to move my site logo to the left, but when I use negative margin the logo disappears behind the column.

I photoshopped the desired outcome:

Desired outcome

This is the website URL: https://designthinkingworkshop.nl/

I've tried z-index in combination with negative margin-left and overflow visivle but I can't get the logo on top of the column next to it.

Upvotes: 1

Views: 275

Answers (1)

Martin
Martin

Reputation: 16433

Without making any massive changes, this can be achieved by removing the 15px padding on your container:

.container {
  padding-left: 0;
}

If it's important for the logo to be flush with the border, you could use a negative margin on it:

.header-logo.logo-image img {
  margin-left: -1px;
}

There are plenty of other ways to achieve the same, including redoing your header section. I'm not a fan of your layout here, it could possibly be a lot cleaner.

Also, I'm sure sure whether you're using any animation or transition effects on your page, but viewing your page caused a large, continual increase in CPU usage by my browser process.

Upvotes: 1

Related Questions