Jump to content

Is this navbar possible with coding?

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)

delawarerising.club 

 

Thanks for your help!

 

I1400088918_ScreenShot2021-09-22at2_25_03AM.png.0a78da667c80bf852cbc06fffb457615.png

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

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%;
}

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.