Two coloured menu bar - is this possible?

Site URL: https://weedwise.squarespace.com

Hi. I have been asked by a designer to create a site where the menu at the top has two different background colours. One for the logo and a second for the navigation. The active page would have a yellow line underneath. I have attached a screenshot. Does anyone know how I can achieve this please? I am not a coder.

Thank you!

Lynne

Pw: W33dw1s3

11 hours ago, spotonlynne said:

Site URL: https://weedwise.squarespace.com

Hi. I have been asked by a designer to create a site where the menu at the top has two different background colours. One for the logo and a second for the navigation. The active page would have a yellow line underneath. I have attached a screenshot. Does anyone know how I can achieve this please? I am not a coder.

Thank you!

Lynne

Pw: W33dw1s3

Add to Design > Custom CSS

/* header layout */
@media screen and (min-width:768px) {
.header-announcement-bar-wrapper {
    padding: 0px !important;
}
.header-nav {
    height: 97px !important;
    flex: 60% !important;
    width: 60% !important;
    background-color: grey;
    padding-right: 5vw;
}
.header-title {
    width: 40% !important;
    flex: 40% !important;
}
.header-nav-item {
    height: auto !important;
}
.header-nav-wrapper {
    height: 100% !important;
}
nav.header-nav-list {
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-title-logo a {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5vw;
}
.header-nav-item--active a {
    background-image: none !important;
}
.header-nav-item {
    height: 100% !important;
    vertical-align: middle;
    display: flex;
    align-items: center;
}
.header-nav-item--active:after {
    content: "";
    background-color: yellow;
    display: block;
    width: 10px;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
}

How to find the code: https://www.loom.com/share/ca7a39d727d64185b669ec7f6945af57

Gosh that is brilliant @tuanphan thank you. I just need to make the text in that grey section blue (#1E2A52). Would you be able to help me with that too please?

Lynne

@tuanphan I have just noticed that the dropdown menus on Services and Our Company are now sitting over the top of this menu bar and now below the folder name. Not sure how to fix this.

L

On 7/21/2021 at 4:58 PM, spotonlynne said:

@tuanphan I have just noticed that the dropdown menus on Services and Our Company are now sitting over the top of this menu bar and now below the folder name. Not sure how to fix this.

L

Add to Design > custom CSS

/* nav color */
.header-nav-item a {
    color: #1e2a52 !important;
}
.header-nav-item a:hover {
    color: #fff !important;
}
.header-nav-folder-item a {
    color: #fff !important;
}
.header-nav-folder-content {
    top: 60px !Important;
}

 

@tuanphan you are brilliant, thank you! It is not quite there though. The yellow line that is supposed to display in the menu on the active page has disappeared and there is now a small yellow block in the middle of the menu bar. See attached. Would you have another look please. So sorry to take up so much of your time.

Lynne

The code I have in total is:

/* header layout */

@media screen and (min-width:768px) {

.header-announcement-bar-wrapper {

    padding: 0px !important;

}

.header-nav {

    height: 97px !important;

    flex: 60% !important;

    width: 60% !important;

    background-color: #EDEAE2;

    padding-right: 5vw;

}

.header-title {

    width: 40% !important;

    flex: 40% !important;

}

.header-nav-item {

    height: auto !important;

}

.header-nav-wrapper {

    height: 100% !important;

}

nav.header-nav-list {

    height: 100% !important;

    display: flex;

    justify-content: center;

    align-items: center;

}

.header-title-logo a {

    padding-top: 20px;

    padding-bottom: 20px;

    padding-left: 5vw;

}

.header-nav-item--active a {

    background-image: none !important;

}

.header-nav-item {

    height: 100% !important;

    vertical-align: middle;

    display: flex;

    align-items: center;

}

.header-nav-item--active:after {

    content: "";

    background-color: #F6FF00;

    display: block;

    width: 10px;

    height: 5px;

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

}

}

/* nav color */

.header-nav-item a {

    color: #1e2a52 !important;

}

.header-nav-item a:hover {

    color: #fff !important;

}

.header-nav-folder-item a {

    color: #fff !important;

}

.header-nav-folder-content {

    top: 70px !Important;

}

@tuanphan I forgot to attach the image! Here you go.

@tuanphan just realised the yellow link line does appear on the folder if viewing one of the pages within it, but not on the other menu items that are not in folders.

On 7/23/2021 at 6:36 PM, spotonlynne said:

@tuanphan just realised the yellow link line does appear on the folder if viewing one of the pages within it, but not on the other menu items that are not in folders.

Don't remove any code. Add this to Design > Custom CSS

.header-nav-item {
    position: relative;
}

 

@tuanphan thank you so very much for all your help. It is much appreciated. I need to learn to code!

Yes please @tuanphan that would be really helpful.

They would look a lot better if they were spaced better.

Also, the client has asked with the two coloured menu that you helped me with, if the text within it could line up with the rest of the site. The site width is set at 1280px. Currently the logo moves depending on the width of the device, as does the site main menu. The graphic designer would like the menu to range right but only to 1280px. Is this possible to add to the code that you did in the email trail above?

Thank you once again!
Lynne

7 hours ago, spotonlynne said:

Yes please @tuanphan that would be really helpful.

They would look a lot better if they were spaced better.

Also, the client has asked with the two coloured menu that you helped me with, if the text within it could line up with the rest of the site. The site width is set at 1280px. Currently the logo moves depending on the width of the device, as does the site main menu. The graphic designer would like the menu to range right but only to 1280px. Is this possible to add to the code that you did in the email trail above?

Thank you once again!
Lynne

Can you take a screenshot?

Hi @tuanphan Yes, I have attached a screenprint of the site now and also one of the graphic designer's layout, so you can see the difference.

Thank you!
Lynne

In Custom CSS, find this code

.header-nav-item {
    height: 100% !important;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

change to this

.header-nav-item {
    height: 100% !important;
    vertical-align: middle;
    display: flex;
    align-items: flex-end;
    bottom: 5px;
}

and Find this code

nav.header-nav-list {
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

change to this code

nav.header-nav-list {
    height: 100% !important;
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
}

 

Hi @tuanphan the new code hasn't worked re the logo. That is still moving and on my iMac is left of the main content. See screenprint.

Best regards,
Lynne

You mean align content with logo?

Hi @tuanphan

Align the logo with the content, the site width is 1280.

Lynne

On 9/6/2021 at 3:33 PM, spotonlynne said:

Hi @tuanphan

Align the logo with the content, the site width is 1280.

Lynne

Add to Design > Custom CSS

/* Align logo page content - bigger screen */
article .content-wrapper {
    max-width: 100% !important;
}

 

Hi @tuanphan

The code didn't work - it moved the content inward but left the logo to the left of it. We need to align the logo with the content, the site width is 1280. I'm not sure what to do.

Thank you!

Lynne

@tuanphan

Hope you are well. You did offer to help me with some other things on this site - see screenprint attached.

It would make the site look a lot nicer! Thank you so much.

Lynne

15 hours ago, spotonlynne said:

@tuanphan

Hope you are well. You did offer to help me with some other things on this site - see screenprint attached.

It would make the site look a lot nicer! Thank you so much.

Lynne

Add to Design > Custom CSS

/* Equal Contact Page List Items */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="60edce4d172ba47bdac1ece1"] .list-item-content {
    min-height: 360px;
}
}
/* Grounds managemenet mobile */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="60f5783c22602c08ca09c5f2"] .list-item-content__description {
    max-width: 100% !important;
}
}

 

On 9/29/2021 at 8:10 AM, tuanphan said:

Add to Design > Custom CSS

/* Equal Contact Page List Items */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="60edce4d172ba47bdac1ece1"] .list-item-content {
    min-height: 360px;
}
}
/* Grounds managemenet mobile */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="60f5783c22602c08ca09c5f2"] .list-item-content__description {
    max-width: 100% !important;
}
}

 

Thank you @tuanphan 🙂 How do I find the data-section-id for the same block on all the service pages (and not just the Grounds Management page)? I could then amend the code so that they all have wider text on a mobile.

Lynne

20 hours ago, spotonlynne said:

Thank you @tuanphan 🙂 How do I find the data-section-id for the same block on all the service pages (and not just the Grounds Management page)? I could then amend the code so that they all have wider text on a mobile.

Lynne

Use this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 10/1/2021 at 8:20 AM, tuanphan said:

Use this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you! The tool I was using didn't pick up those sections. I've managed to do them all now.

Lynne