Site Logo Beneath Header?

Site URL: https://www.huntercombegolfshop.co.uk/

Hi everyone,

Could anyone help me to figure out how to move the site logo beneath the navigation bar in Squarespace 7.1 please?

The existing brine site has the logo completely separate beneath the navigation bar and I'm currently going through the changes to the new template in 7.1 before publishing but can't work how to do it effectively!

Thank you very much!

Hey @viccismarshall, there is a snippet in the Curious Coder Membership that includes having the logo beneath the main header items. It also adds a border around the site nav items but you'd be able to easily adjust the CSS to remove that again. Here's the snippet but note it is behind a paywall.

hi @abibacon thanks so much for that - please can you let me know what the tutorial is called so I can take a look?

thank you!

@viccismarshall of course, its called 'Header Style Outline', you'll be able to see the thumbnail under 'Code Curious > Code Catalogue' but the snippet itself will be behind the paywall.

Hi @abibacon, I've tried that snippet and although it's a great design, it's not the effect I need with the logo being actually floating beneath the header ( I removed all the gridlines ). Thank you for the suggestion though!

I have found this code from @creedon but now just need to get the logo floating beneath the header!

/* navigation at top of header */

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {

  margin-bottom : 1.8vw;
  margin-top : 0;
  order : -1;

  }

hey @viccismarshall, do you have an example of what you're looking to achieve?

Yes - here you go! With the navy header at the top with nav - the bird underneath in the photo is the logo. 

Thank you!

You can use this to Website Tools > Custom CSS

div.header-title-nav-wrapper {
    flex-direction: column-reverse !important;
}