Jump to content

Changing layout of header and footer

Recommended Posts

Site URL: https://apricot-coconut-mf38.squarespace.com/

Been scouring the forums but everything I've copied/pasted has not worked. I have a client that is coming from a different platform who has very specific demands I haven't been able to meet with the default customization in Squarespace. I'm attaching an image of what they want. 

Here's how I would like to edit the layout of the header on the site:

  1. Lower the navigation items so their bottom edge is the same bottom edge as the logo
  2. Space out each navigation item so that they are not bunched to the right
  3. Insert a line below the header with white space below it
  4. Remove the line that active navigation items have

For the footer:

  1. Align it to the left so it's left edge is in line with the logo
  2. Insert a line above the footer with white space 

Password: architect

Completely at my wits end so any help would be appreciated 🙏

Screen Shot 2022-02-13 at 20.05.58.png

Edited by Digorg
forgot something I need help with
Link to comment
35 minutes ago, Digorg said:

Site URL: https://apricot-coconut-mf38.squarespace.com/

Been scouring the forums but everything I've copied/pasted has not worked. I have a client that is coming from a different platform who has very specific demands I haven't been able to meet with the default customization in Squarespace. I'm attaching an image of what they want. 

Here's how I would like to edit the layout of the header on the site:

  1. Lower the navigation items so their bottom edge is the same bottom edge as the logo
  2. Space out each navigation item so that they are not bunched to the right
  3. Insert a line below the header with white space below it
  4. Remove the line that active navigation items have

For the footer:

  1. Align it to the left so it's left edge is in line with the logo
  2. Insert a line above the footer with white space 

Password: architect

Completely at my wits end so any help would be appreciated 🙏

Screen Shot 2022-02-13 at 20.05.58.png

1. Do you mean something like this?

image.thumb.png.69493b168ede041d5b51abc49d6eb7d5.png

Try adding to Home > Design > Custom Css

.header-display-desktop  .header-nav {
  position: absolute;
  right: 0;
  bottom: 0;
}

Let me know how it works

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
5 minutes ago, bangank36 said:

1. Do you mean something like this?

image.thumb.png.69493b168ede041d5b51abc49d6eb7d5.png

Try adding to Home > Design > Custom Css

.header-display-desktop  .header-nav {
  position: absolute;
  right: 0;
  bottom: 0;
}

Let me know how it works

worked great for #1, thank you! 

I should add that I also have this Custom CSS already on page to help with the navigation links changing color:

.item-pagination[data-collection-type^="portfolio"], .item-pagination[data-collection-type^="portfolio"] {
    display: none;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #B0B77B !important;
    transition-duration: 0.2s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #B0B77B !important;
}

 

Link to comment

for item #3, I made a little headway but am still stuck. The lines above footer and under header mostly display correctly on every page except the home page. I don't know why. I've tried changing the section height in the gallery on page but that has had no effect.

  1. how do I get the border-bottom and border-top to display on the home page?
  2. is it also possible to raise or lower the border-bottom or border-top so it's "tighter" to top or bottom, respectively?
  3. how do I remove the strikethrough through active navigation items?

here is my css now:

.header-display-desktop  .header-nav {
  position: absolute;
  right: 0;
  bottom: 0;
}
.item-pagination[data-collection-type^="portfolio"], .item-pagination[data-collection-type^="portfolio"] {
    display: none;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #B0B77B !important;
    transition-duration: 0.2s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #B0B77B !important;
}
header#header {
    border-bottom: 1.5px solid grey
     
}
/* Add a line to top of footer */
footer#footer-sections {
    border-top: 1.5px solid grey;
}

 

Link to comment
On 2/15/2022 at 4:19 AM, Digorg said:

for item #3, I made a little headway but am still stuck. The lines above footer and under header mostly display correctly on every page except the home page. I don't know why. I've tried changing the section height in the gallery on page but that has had no effect.

  1. how do I get the border-bottom and border-top to display on the home page?
  2. is it also possible to raise or lower the border-bottom or border-top so it's "tighter" to top or bottom, respectively?
  3. how do I remove the strikethrough through active navigation items?

here is my css now:

.header-display-desktop  .header-nav {
  position: absolute;
  right: 0;
  bottom: 0;
}
.item-pagination[data-collection-type^="portfolio"], .item-pagination[data-collection-type^="portfolio"] {
    display: none;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #B0B77B !important;
    transition-duration: 0.2s;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #B0B77B !important;
}
header#header {
    border-bottom: 1.5px solid grey
     
}
/* Add a line to top of footer */
footer#footer-sections {
    border-top: 1.5px solid grey;
}

 

#3. Use this CSS

div.header-nav-item--active a {
    background-image: none !important;
}

#2. With Footer line, use this CSS

footer#footer-sections:before {
    content: "";
    background-color: grey;
    display: block;
    width: 100%;
    height: 1.5px;
    position: relative;
    bottom: -10px;
    z-index: 99999;
}

#1. I see it shows here. Can you explain clearly?

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
13 hours ago, tuanphan said:

#3. Use this CSS

div.header-nav-item--active a {
    background-image: none !important;
}

#2. With Footer line, use this CSS

footer#footer-sections:before {
    content: "";
    background-color: grey;
    display: block;
    width: 100%;
    height: 1.5px;
    position: relative;
    bottom: -10px;
    z-index: 99999;
}

#1. I see it shows here. Can you explain clearly?

#1 I drew two red arrows to show where the header and footer lines are on the home page I see. Because they are directly on the border of the gallery, instead of a few pixels above and below it, the lines are not visible. If you click through to other pages, the lines are visible. I don't know why.

Also: even on those other pages where the lines are visible, the lines are still too far away from the header and footer, respectively. I would like the white space between the line and the header and the line and the footer to be identical. Hope that makes sense! Really learning a lot from this thread and all your other posts, Tuan - thank you 🙏

and your tweak fixed #3 ty!

 

Screen Shot 2022-02-17 at 18.12.00.png

Edited by Digorg
new info
Link to comment
10 hours ago, Digorg said:

#1 I drew two red arrows to show where the header and footer lines are on the home page I see. Because they are directly on the border of the gallery, instead of a few pixels above and below it, the lines are not visible. If you click through to other pages, the lines are visible. I don't know why.

Also: even on those other pages where the lines are visible, the lines are still too far away from the header and footer, respectively. I would like the white space between the line and the header and the line and the footer to be identical. Hope that makes sense! Really learning a lot from this thread and all your other posts, Tuan - thank you 🙏

and your tweak fixed #3 ty!

 

Screen Shot 2022-02-17 at 18.12.00.png

#1. You need to change line color, change line height, or make a small space between image - 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

I finally figured out that if I make the Gallery "Full" instead of "Full Width" the header and footer lines appear on the homepage. But in fixing that, a different problem arose:

I made numbers on the screenshot to illustrate:

  1. Now that the Gallery is Full, it no longer reaches the edge of the page. How do I get it to maintain its current height but extend horizontally to the edge of the page?
  2. I want to move the horizontal line up so it is closer to the logo.
  3. I want to move the horizontal line down so it is closer to the text in the footer.

Your help is greatly appreciated. thank you, Tuan!

 

 

Screen Shot 2022-02-24 at 10.31.44.png

Link to comment
  • 2 weeks later...
  • 4 weeks later...

hi trying some last tweaks to get this ready....

  1. Make header and footer are identical height. I've messed with the CSS quite a bit to get this working but I'm out of ideas.
  2. Make sure the logo does not change in size upon page resize. Not sure why but the logo height seems to move around as the page gets narrower. I'd like the logo to stay the exact same size (height and width) no matter what the page width is.

Is any of this possible? Thanks for all your help, Tuan

Edited by Digorg
Link to comment

all my CSS for the site here:

.header-display-desktop  .header-nav {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media screen and (min-width:641px) {
.header-announcement-bar-wrapper {
    width: 95% !important;
    margin: 0 auto;
}
}
/* Nav item color */
.header-nav-item a {
    color: #BECA63 !important; 
}
/* Nav item hover color */
.header-nav-item> a:hover {
    color: black !important;
}
div.header-nav-item--active a {
    background-image: none !important;
}
.item-pagination[data-collection-type^="portfolio"], .item-pagination[data-collection-type^="portfolio"] {
    display: none;
}

/* Add a line under header */
header#header {
    border-bottom: 1.5px solid grey;
  	padding-bottom: 0px;
  	line-height: 0px;
    margin-bottom: 5px;  
}
/* Add a line to top of footer */
footer#footer-sections {
    border-top: 1.5px solid grey;
  	padding-top: 0px;
  	line-height: 0px;
    margin-top: 5px;
}
footer#footer-sections:before {
    content: "";
    background-color: grey;
    display: block;
    width: 100%;
    height: 1.5px;
    position: relative;
    bottom: -80px;
    z-index: 99999;
}
section[data-section-id="616e338e0987d424e2383063"] {
	margin-top: 10px; 
	margin-bottom: 10px; 
  }
section[data-section-id="61b2ec6e8aa947796b8b92a6"] {
	margin-top: 10px; 
	margin-bottom: 10px; 
}
.sqs-block-gallery  .image-slide-title {
  text-align: left !important;
}

 

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.