Jump to content

Left Align secondary header & insert line

Recommended Posts

Site URL: https://rectangle-panda-mjyt.squarespace.com/?p

password: bobcats2014

Hi,

I created a secondary header above the primary one and I wish to left align this but can't seem to find the correct css to solve this. Once that is accomplished, I would like to insert a logo of a cell phone next to the phone number and a location logo (like a pin drop) next to the address if possible.

I am also looking to place a thin horizontal line below this secondary header (which would be above the primary one) to have some aesthetic separation between the secondary and primary header. Ideally, this line would only span the width of where the text of the headers have text, and NOT from edge to edge of the page (if that makes sense). See attached image for what I am trying to accomplish with this line - this is a rough and dirty highlighted line so pay no mind to the wavy aspect of it nor the thickness of it. I would like it to be thin and white. 

 

horizontal line.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

3 hours ago, distyboy said:

Site URL: https://rectangle-panda-mjyt.squarespace.com/?p

password: bobcats2014

Hi,

I created a secondary header above the primary one and I wish to left align this but can't seem to find the correct css to solve this. Once that is accomplished, I would like to insert a logo of a cell phone next to the phone number and a location logo (like a pin drop) next to the address if possible.

I am also looking to place a thin horizontal line below this secondary header (which would be above the primary one) to have some aesthetic separation between the secondary and primary header. Ideally, this line would only span the width of where the text of the headers have text, and NOT from edge to edge of the page (if that makes sense). See attached image for what I am trying to accomplish with this line - this is a rough and dirty highlighted line so pay no mind to the wavy aspect of it nor the thickness of it. I would like it to be thin and white. 

 

horizontal line.png

For the left align secondary navigator, adding to home > design > custom css

.cloned-subnav .header-nav-wrapper {
  justify-content: flex-start !important;   
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.078ca6dcbd3503597677dc29c20c74ff.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Thank you! How can I get it to line with the header below it? The header (the logo) below the secondary nav bar is indented a little which was done in "edit header" "desktop" "width" "insert". So I like the logo insert a little, just hoping to have the secondary header line up with it.

Edited by distyboy
clarity
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.