Adding address, phone, and button in header.

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!

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!

 

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

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.

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!

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.

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

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.

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

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.

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. 

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!

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?

14 hours ago, tuanphan said:

Do you still need help?

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/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?

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

21 hours ago, tuanphan said:

Can you check password? It is incorrect

pizzapie

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

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

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

Thank you!

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?

On 1/9/2022 at 10:41 PM, tuanphan said:

Still incorrect. Can you check it again?

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.

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)

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!  

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!

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!

Use this code

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

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!