Jump to content

Adding address, phone, and button in header.

Recommended Posts

Site URL: https://khaki-indigo-bjze.squarespace.com/config/

https://khaki-indigo-bjze.squarespace.com/config/
(pizzapie)

Need to add a few things to the site header.

I added a phone number in my header using this code in the Custom CSS section:
 

/* PHONE NUMBER IN HEADER */

.header-nav:before {
    content: "012.345.6789";
  font-family: Catamaran;
  display: block;
  position: relative;
  color: #000000 !important; 
  text-align:right;  
  right: -400px;
  top: -60px;
  font-size: 40px;
  font-weight: bold;
}


See Photo #1.

I want to add the address to the other side, so placed this code in the Custom CSS section::

 

/* ADDRESS IN HEADER */

.header-nav:before {
   content: "xxxx North St, Suite 000, Woodland Hills, NE";
   font-family: Catamaran;
   display: block;
   position: relative;
   color: black; 
   text-align:left;  
   right: 500px;
   top: -40px;
   font-size: 20px;
   font-weight: normal;
}  


When I added this code, the phone number on the right disappeared. See Photo #2.

I also need to fit a scheduling button on the top right near the phone number.

What I found online was to go to "Home" > "Commerce" > "Header and Footer." However, there is no Header and Footer option in my options.

Thank you for any assistance!

 

HEADER_PHONE NUMBER.PNG

HEADER_THEN ADDRESS.PNG

Edited by Poppyseeds
Forgot to indicate where I put the code.
Link to comment
7 hours ago, Poppyseeds said:

Site URL: https://khaki-indigo-bjze.squarespace.com/config/

https://khaki-indigo-bjze.squarespace.com/config/
(pizzapie)

Need to add a few things to the site header.

I added a phone number in my header using this code in the Custom CSS section:
 

/* PHONE NUMBER IN HEADER */

.header-nav:before {
    content: "012.345.6789";
  font-family: Catamaran;
  display: block;
  position: relative;
  color: #000000 !important; 
  text-align:right;  
  right: -400px;
  top: -60px;
  font-size: 40px;
  font-weight: bold;
}


See Photo #1.

I want to add the address to the other side, so placed this code in the Custom CSS section::

 

/* ADDRESS IN HEADER */

.header-nav:before {
   content: "xxxx North St, Suite 000, Woodland Hills, NE";
   font-family: Catamaran;
   display: block;
   position: relative;
   color: black; 
   text-align:left;  
   right: 500px;
   top: -40px;
   font-size: 20px;
   font-weight: normal;
}  


When I added this code, the phone number on the right disappeared. See Photo #2.

I also need to fit a scheduling button on the top right near the phone number.

What I found online was to go to "Home" > "Commerce" > "Header and Footer." However, there is no Header and Footer option in my options.

Thank you for any assistance!

 

HEADER_PHONE NUMBER.PNG

HEADER_THEN ADDRESS.PNG

It looks like  you are using the pseudo element to set it

We can create only 1 element with pseudo element (phone or address,...). So when you use before pseudo element for phone, then use it again for address, the phone will disapear.

I suggest another solution that you can create a code block in footer then we will have some code to move it on header

It could be better if you can take a screenshot of where you want to put them

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

Hey @Poppyseeds

Change the second ":after" to ":before" as a starting point.

But ideally you'd create a separate block/bit of HTML for this.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
12 hours ago, KwameAndCo said:

Hey @Poppyseeds

Change the second ":after" to ":before" as a starting point.

But ideally you'd create a separate block/bit of HTML for this.

Hi Kwame ~

Thank you for the suggestion; now they are both there! Happy girl.

Next? To figure out how to write the address like this:

XXXX Main Street, Suite X
Anywhere, USA

Then to center it all.

Then to get it to work on the mobile site. (I haven't tackled any mobile yet, and it looks scary awful.)

Is it better to do it this way, or Tuan's way? Which is easier to maintain once I hand it back to the client?

Cheers!

HEADER_PHONE NUMBER-ADDRESS_SUGG.PNG

Edited by Poppyseeds
Needed to expand my answer!
Link to comment

Hi @Poppyseeds

You can't do that using CSS. Or rather, it's going to be awkward.

The issue is you're using CSS to create an element that should be created with HTML.

You basically have two options to do it properly:

1. Create HTML elements in your code injection and then style them with CSS. If you're using one of the sticky/scrollback header options it's going to be a bit annoying and you'll likely want to use javascript to insert them into the Header.

2. Create them using Squarespace blocks that are in the footer, then use javascript to attach them to the header.

Doing it with pure CSS would mean they can't be clicked on and you'll probably have a lot more grief making them fit. It'll also mean your client needs to change CSS to edit.

Option 2 would be most user friendly for someone who isn't famiiar with CSS/HTML so I'd suggest doing that.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
24 minutes ago, KwameAndCo said:

Hi @Poppyseeds

You can't do that using CSS. Or rather, it's going to be awkward.

The issue is you're using CSS to create an element that should be created with HTML.

You basically have two options to do it properly:

1. Create HTML elements in your code injection and then style them with CSS. If you're using one of the sticky/scrollback header options it's going to be a bit annoying and you'll likely want to use javascript to insert them into the Header.

2. Create them using Squarespace blocks that are in the footer, then use javascript to attach them to the header.

Doing it with pure CSS would mean they can't be clicked on and you'll probably have a lot more grief making them fit. It'll also mean your client needs to change CSS to edit.

Option 2 would be most user friendly for someone who isn't famiiar with CSS/HTML so I'd suggest doing that.

I did both using a CSS suggestion, but I agree it will get messy.

I did quite a bit using CSS suggestions from other forums, etc., and think I may have gotten myself into a mess altogether. 

My mobile site? A dreadful, dreadful mess. Don't even know where to begin fixing this...

Link to comment
21 minutes ago, Poppyseeds said:

My mobile site? A dreadful, dreadful mess. Don't even know where to begin fixing this...

Reference the mockups that your client agreed upon before starting the build. If you've labelled layers etc in figma/XD or whatever you're prototyping with it helps.

Preparing your breakpoints in advance helps too. And remember, mobile can always be a bit simplified.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
5 hours ago, KwameAndCo said:

Reference the mockups that your client agreed upon before starting the build. If you've labelled layers etc in figma/XD or whatever you're prototyping with it helps.

Preparing your breakpoints in advance helps too. And remember, mobile can always be a bit simplified.

I'm a newbie! No idea what you just said. LOL.  

I'll ask Google...

Link to comment

So, generally, when building a website you want to have planned for desktop, mobile and arguably some other screen sizes.

"Mockups" are basically a "test version" of how you want it to look - in between a wireframe and the real site. It's the design you will have shown to the client before you built it so that you don't have to deal with constant changes. If this was architecture, this would be the "model" of the building you're building because you wouldn't want to suddenly tell your construction team mid-build that actually they need to change the location of a room.

Figma and Adobe XD tend to be the main platforms used for this.

Breakpoints are where your design switches to the tablet/mobile versions etc.

So I was just saying to check your mobile design and see where you can simplify.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
15 hours ago, KwameAndCo said:

So, generally, when building a website you want to have planned for desktop, mobile and arguably some other screen sizes.

"Mockups" are basically a "test version" of how you want it to look - in between a wireframe and the real site. It's the design you will have shown to the client before you built it so that you don't have to deal with constant changes. If this was architecture, this would be the "model" of the building you're building because you wouldn't want to suddenly tell your construction team mid-build that actually they need to change the location of a room.

Figma and Adobe XD tend to be the main platforms used for this.

Breakpoints are where your design switches to the tablet/mobile versions etc.

So I was just saying to check your mobile design and see where you can simplify.

 

You're my new best friend. 

Link to comment
On 12/27/2021 at 6:23 AM, bangank36 said:

It looks like  you are using the pseudo element to set it

We can create only 1 element with pseudo element (phone or address,...). So when you use before pseudo element for phone, then use it again for address, the phone will disapear.

I suggest another solution that you can create a code block in footer then we will have some code to move it on header

It could be better if you can take a screenshot of where you want to put them

 

I put the address and phone number in the footer, but no idea how to move it and code it for mobile. Thank you in advance for your knowledge and your time!

 

Link to comment
On 12/31/2021 at 12:09 AM, Poppyseeds said:

 

I put the address and phone number in the footer, but no idea how to move it and code it for mobile. Thank you in advance for your knowledge and your time!

 

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/2/2022 at 10:59 AM, Poppyseeds said:

Yes!

What I'm using now is a Custom CSS code, but I understand it is not the best way to go.

You suggested I put it in the footer, and you'd help me with the code to put it in the header.

Thank you!

 

On 1/1/2022 at 8:14 PM, tuanphan said:

Do you still need help?

Hi @tuanphan!

Still need help. I have the phone and address in the header using a Custom CSS, but you suggested it would be better to put it in the footer and then move it to the top.

Is that still better? Or should I leave it as is?

Link to comment
On 1/7/2022 at 6:03 AM, Poppyseeds said:

 

Hi @tuanphan!

Still need help. I have the phone and address in the header using a Custom CSS, but you suggested it would be better to put it in the footer and then move it to the top.

Is that still better? Or should I leave it as is?

Can you check password? It is incorrect

pizzapie

https://khaki-indigo-bjze.squarespace.com/?noredirect

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/9/2022 at 7:21 AM, Poppyseeds said:


It expired. I made a copy of an updated one:

Site:  https://kumquat-kumquat-mt9a.squarespace.com/config/
PW:  bluemoon

Thank you!

Still incorrect. Can you check it again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/11/2022 at 7:14 AM, Poppyseeds said:

Oh. My.

So sorry. No idea what's happening.

SITE:   https://ferret-bird-3rl2.squarespace.com
ACCESS:  blahblahblah

And trying to get the address stacked to two lines instead of one long line.

Thank you, yet again.

Edit address code to this

.header-nav:after {
    content: "6316 N Topanga Blvd, #405,\A Woodland Hills, CA";
    white-space: pre-wrap;
    font-family: 'Aktiv-Grotesk';
    position: relative;
    color: #302a27;
    right: 33.9vw;
    top: -3.8vh;
    font-size: .9em;
    font-weight: light;
    letter-spacing: -.04em;
    line-height: -.5em
}

(I used white-space: pre-wrap; & \A to split address to 2 lines)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
54 minutes ago, tuanphan said:

Edit address code to this

.header-nav:after {
    content: "6316 N Topanga Blvd, #405,\A Woodland Hills, CA";
    white-space: pre-wrap;
    font-family: 'Aktiv-Grotesk';
    position: relative;
    color: #302a27;
    right: 33.9vw;
    top: -3.8vh;
    font-size: .9em;
    font-weight: light;
    letter-spacing: -.04em;
    line-height: -.5em
}

(I used white-space: pre-wrap; & \A to split address to 2 lines)

 

THIS IS AWESOME! So excited - It works and I'm grateful!  

Link to comment
22 hours ago, Poppyseeds said:

THIS IS AWESOME! So excited - It works and I'm grateful!  

@tuanphan

Hi Tuan!

I put in the code and it worked wonderfully - I noticed, though, that it increased the space between the Site Title and the Menu. 

Is there a way to decrease some of this space?

Thanks again - I learn so much from you!

SITE TITLE & MENU SPACING.PNG

Link to comment
On 1/13/2022 at 2:11 PM, Poppyseeds said:

@tuanphan

Hi Tuan!

I put in the code and it worked wonderfully - I noticed, though, that it increased the space between the Site Title and the Menu. 

Is there a way to decrease some of this space?

Thanks again - I learn so much from you!

SITE TITLE & MENU SPACING.PNG

Use this code

nav.header-nav-list {
    position: relative;
    top: -50px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
20 hours ago, tuanphan said:

Use this code

nav.header-nav-list {
    position: relative;
    top: -50px;
}

 

Hi Tuan!

Just wanted to let you know that I put in the code, but it moves the whole title and menu up (see photo). So, I wrote a bunch of code. Seems to work, but flew by the seat of my pants. 

/* SITE TITLE FONT SIZE - DESKTOP */

@media only screen and (min-width:641px) {
a#site-title {  
  font-size: 1.3em !important;}}

/* ADJUST VERT SPACE OF NAVIGATION BAR */

.header .header-title-nav-wrapper .header-nav 
{margin-top: -1.2em !important;} 

/* TRYING TO LINE UP BUTTON WITH TITLE */

.header-actions .btn {
  margin-top: -1.0em !important;
  margin-bottom: 2.0em !important;}
  
/* REDUCE VER PADDING ON HEADER */

.header .header-announcement-bar-wrapper {
  padding-top: 4.2vw !important;
  padding-bottom: 3vw !important;}


I'm learning... thank you!

 

SITE & MENU SPACING.PNG

SITE TITLE & MENU SPACING_FIXED YAY.PNG

Edited by Poppyseeds
add a photo
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.