Jump to content

Two coloured menu bar - is this possible?

Go to solution Solved by tuanphan,

Recommended Posts

On 9/8/2021 at 1:28 AM, tuanphan said:

Add to Design > Custom CSS

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

 

@tuanphan that code made the content go wider to match where the logo currently sits. The designer wants the site width to be 1280 pixels and everything to line up within that width. See image attached. I am wondering if because there is already so much CSS code, something is conflicting? Would you have time to have a look for me please?

 

This is the code you gave me before:

/* header layout */
@media screen and (min-width:768px) {
.header-announcement-bar-wrapper {
    padding: 0px !important;
}
.header-nav {
    height: 100px !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: #727786 !important;
}
.header-nav-folder-item a {
    color: #fff !important;
}
.header-nav-folder-content {
    top: 70px !Important;
}
.header-nav-item {
    position: relative;
}

screencapture-weedwise-squarespace-2021-10-15-20_53_50-1 copy.jpg

Link to comment
21 hours ago, spotonlynne said:

@tuanphan that code made the content go wider to match where the logo currently sits. The designer wants the site width to be 1280 pixels and everything to line up within that width. See image attached. I am wondering if because there is already so much CSS code, something is conflicting? Would you have time to have a look for me please?

 

This is the code you gave me before:

/* header layout */
@media screen and (min-width:768px) {
.header-announcement-bar-wrapper {
    padding: 0px !important;
}
.header-nav {
    height: 100px !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: #727786 !important;
}
.header-nav-folder-item a {
    color: #fff !important;
}
.header-nav-folder-content {
    top: 70px !Important;
}
.header-nav-item {
    position: relative;
}

screencapture-weedwise-squarespace-2021-10-15-20_53_50-1 copy.jpg

Add to Design > Custom CSS

header#header, article section:first-child {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.