How to get Logo to overlap with page (image attached) Dawn/Origin theme

Store Design
,
1

Hi, I am using Dawn newest theme version, I want to overlap the logo with the page, see images below.

How do I go about this? I still want to maintain the functionality of the logo (bringing people back to home page upon clicking)

example of what I want

example.PNG
example.PNG1413×312 440 KB

How it currently is

how it currently is.PNG
how it currently is.PNG1212×310 23.4 KB

https://okell-s.myshopify.com/

(password: beer)

1 Like
2

Hey @Giorolling

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Moeed_0-1686554228128.png
Moeed_0-1686554228128.png1902×221 28.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hi @Giorolling

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.header__heading-logo {
    transform: translateY(74px);
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

4

Perfect! How can I duplicate this for the Logo image I have in the footer, see image attached. Note the blue area on my theme was created through a custom liquid section that I just gave a blue background, it is not apart of the footer

footer.PNG
footer.PNG1415×517 33.8 KB

5

Please read my reply

6

Hey @Giorolling

For this, you may have to hire a Shopify developer who can do this for you because this will require further advanced coding as it is not possible through CSS. So, I suggest you to hire a developer who can implement this type of footer for you!

Best Regards
Moeed

7

Can this work on mobile size screen?