Colored bar behind primary navigation

Site URL: https://thecarmomofficial.squarespace.com/homepage-new

Hey! Is there a way to add a full-width colored background to the main navigation in 7.1? The layout is centered, I just need a colored bar behind the navigation, not the logo. I have attached a photo as an example of what I am looking to do.

Add to Design > Custom CSS

/* Fullwidth nav background */
.header-announcement-bar-wrapper {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.header-display-desktop {
    flex-direction: column;
}
.header-title-nav-wrapper {
    flex: 0 0 100% !important;
    margin-right: auto;
    width: 100% !important;
}
nav.header-nav-list {
    display: flex;
    width: 100%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #f1f2f3;
}
.header-nav-item a {
    line-height: initial;
}
.header-nav-item {
    margin: 0 !important;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-left: -1px !important;
}

@tuanphanThank you so much! Is there a way to adjust the shopping cart to stay in the top right corner? The new layout has it layered in the middle of the nav. *screenshot attached.

On 4/12/2022 at 11:36 PM, alishaserre said:

@tuanphanThank you so much! Is there a way to adjust the shopping cart to stay in the top right corner? The new layout has it layered in the middle of the nav. *screenshot attached.

It looks like you solved this?

Hello!

Having the same issue - the action button is now either just bellow the wrapper, or if i remove the column view, disappears altogether. 

I would like it to stay above the colored wrapper, top right, where it usually is. 

Link: https://cod-begonia-bja4.squarespace.com/ 

passw: annaboyd

18 hours ago, Anele0610 said:

Hello!

Having the same issue - the action button is now either just bellow the wrapper, or if i remove the column view, disappears altogether. 

I would like it to stay above the colored wrapper, top right, where it usually is. 

Link: https://cod-begonia-bja4.squarespace.com/ 

passw: annaboyd

The button should be here?

Hi @tuanphan,

Looks like I have the same question as some other people that ghosted you (i won't 👻!). I created a custom cart but it gets pushed below the nav now. Is it possible to be displayed like the screenshot rather than what you see if you visit my dev site:

https://gerbil-oleander-g7sx.squarespace.com/workshops-events

Password: heather

Thanks in advance for any help!

On 11/26/2024 at 8:05 PM, sethhoffman said:

Hi @tuanphan,

Looks like I have the same question as some other people that ghosted you (i won't 👻!). I created a custom cart but it gets pushed below the nav now. Is it possible to be displayed like the screenshot rather than what you see if you visit my dev site:

https://gerbil-oleander-g7sx.squarespace.com/workshops-events

Password: heather

Thanks in advance for any help!

You can use this to Custom CSS box

div.header-actions.header-actions--right {
    position: absolute;
    right: 1vw;
    top: 0
}

Once again you are my hero @tuanphan - that worked like a charm! 🙂