Jump to content

Is this navbar possible with coding?

Go to solution Solved by Que594,

Recommended Posts

Site URL: https://delawarerising.club

Hello! I've been spending many a' nights battling with Squarespace headers...

Is it possible to have a header like the one below on my site through coding? What would the code look like to have the header (the circle bit) hanging over the next section?

My site is version 7.0 - Pacific family (Event Horizon template)



Thanks for your help!



Link to comment
  • Replies 3
  • Views 608
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Below is the code I used for this (kind of messy, not a pro coder. lol). It woooorks!


//* determines height of site logo *//
 #header {
   margin: -120px auto;
   padding: 0px 0px;

//* pushing site logo to left of nav *//
#header #logoWrapper, 
#header #siteTitleWrapper { 
   position: relative; 
   left: 15%; 
   -webkit-transform: translate(-50%,0); 
   -moz-transform: translate(-50%,0); 
   -ms-transform: translate(-50%,0); 
   -o-transform: translate(-50%,0); 
   transform: translate(-90%,80%); 
   text-align: right !important;

#header #mainNavWrapper .index { 
   margin: 0 0 0 12px !important; 
   text-align: right !important;

//* removes center gap from logo *//
#mainNavigation div.collection {
   margin: 0 !important;

#header #mainNavWrapper {
   text-align: right !important;

//* positioning of nav links *//
#header #mainNavWrapper {
   text-align: right !important;
   right: 12%;

Edited by Que594
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.