How to overlap Logo with Navigation Bar?

Store Design
, , ,
1

Hey so I’m trying to figure out how to customize my navigation bar to match the draft I designed below. I’m using the theme “Flux”. You can view the website here: Store Link: https://0rfqxv-0i.myshopify.com/

  1. How do I change the size of my logo without affecting the size of my navigation bar? I would like to increase it’s size and have it overlap the navigation bar if possible.

  2. I want to move the logo to the left, but not all the way to the left. How do I control where the logo sits on the navigation bar?

  3. I want to move the navigation bar text (home, shop, help, etc) closer to the logo on the left side. Right now it’s centered and I can’t seem to move it.

Shopify EX1
Shopify EX11971×900 183 KB

Thanks so much!

2

You can add this code to Custom CSS in Theme Settings, then check

@media (min-width: 990px) {
    .header__heading, .header__heading-link {
        grid-area: navigation !important;
        justify-self: left !important;
    }   
   .section-header .header__heading-logo {
        max-width: 140px !important;
        position: absolute !important;
        top: -24px;
    }
   .main-navigation-mega {
        grid-area: heading !important;
   }
    .additional_links--false.header--menu-logo-icons {
        grid-template-columns: 2fr 6fr 6fr !important;
    }
}

Screenshot 2026-06-30 at 10.57.08
Screenshot 2026-06-30 at 10.57.082414×714 94 KB

3

Hi @actuallyrea

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

@media screen and (min-width: 990px) {
  .header {
    display: flex !important;
    align-items: center !important;
    position: relative;
  }

  .header__heading {
    position: absolute !important;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
  }

  .header__heading-logo {
    width: 100px !important;
    height: auto !important;
  }

  .main-navigation-mega,
  .navigation-menu,
  .header__inline-menu {
    display: flex !important;
    justify-content: flex-start !important;
    margin-left: 70px !important;
    width: auto !important;
    flex: unset !important;
    gap: 18px;
  }

  .header__icons {
    margin-left: auto !important;
  }
}

image
image1237×116 17.5 KB

Best regards,
Devcoder :laptop:

4

Oh my gosh that worked! I’d been struggling for hours and this totally solved it, thank you so much!!

5

Hi @actuallyrea

Thank you so much! I’m really glad it worked for you. :blush:

If you don’t mind, please like all the posts. It would mean a lot. Thank you!