Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Two coloured menu bar - is this possible?


Go to solution Solved by tuanphan,

Recommended Posts

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

menu-bar.png

Link to comment
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

menu-bar.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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

}

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • Solution
On 7/26/2021 at 4:10 PM, spotonlynne said:

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

Do you want to solve these?

Site URL – https://weedwise.squarespace.com/?password=W33dw1s3

1. (Desktop – Contact) The amount of text in the blocks is different, so the size of the blocks is not equal, it doesn’t look good.

https://weedwise.squarespace.com/contact/?password=W33dw1s3

weedwise.squarespace.com-01-min.png

2. (Mobile – Ground management) Increase text width?

https://weedwise.squarespace.com/grounds-management/?password=W33dw1s3

weedwise.squarespace.com-02-min.png

3. (Tablet – Landscaping) Text break.

https://weedwise.squarespace.com/landscaping/?password=W33dw1s3

weedwise.squarespace.com-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 1 month later...

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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 3 weeks later...
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

Screenshot 2021-09-28 at 16.50.48.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...