css Changing layout of header and footer

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 🙏

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 🙏

1. Do you mean something like this?

Try adding to Home > Design > Custom Css

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

Let me know how it works

5 minutes ago, bangank36 said:

1. Do you mean something like this?

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

For item #2, I have tried changing the desktop header layout but I get this, with all the nav elements stacked on top of each other.

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

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?

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!

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!

 

#1. You need to change line color, change line height, or make a small space between image - 2 lines?

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!

Bump

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

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