Drop down menu styling

Site URL: https://dev-bcco.squarespace.com

Hi.

I've styled a drop down menu using some code from the Shwartz-Edmsiten site and adding some bits to it (some width and nowrap properties to accommodate the longer titles and added the transform property to bring the menu down the page).

Can anyone help with an edit to the code so that the dropdown menu drops by 'however high the main navigation menu bar is' ?

At the moment it's a set pixel height so that it sits exactly along the bottom of the menu bar, but when the screen resizes this no longer works exactly. I either need to add a calculation, or some kind of flex property, sadly this is the limit of my css editing abilities!

Site: https://dev-bcco.squarespace.com/config/design/custom-css
password: bcco

Code below

.header-nav .header-nav-item--folder .header-nav-folder-content {width: 300px !important; 
  white-space: nowrap; 

  padding: 0;
  .header-nav-folder-item {
    padding: .5em 1em;
  }
  .header-nav-folder-item:hover {
    background: #BDB26E;
    a {
      color: #57595C !important;
    }
  }
}

.header-nav-folder-item 
  {background:#57595C; transform: translateY(28px);
    padding: .5em 1em;
  }
 

Hi

There is no real easy solution for this one as the menu can't calculate what size the header bar is going to be as its not contained within it. The menu is a child of the header-nav-item-folder element.

What you could do, as a workaround is use media queries to change the position of the drop down for certain screen sizes - as it's the available width of the screen that is forcing the menu items to wrap onto a new line and this expands the heading.

Long story short, adding these media queries will move the drop down according to a certain screen width - this was just by having a look at how high it was when the screen was moved.

I'm doing this on the .header-nav-folder-content in one go so you will need to remove the translateY css on the .header-nav-folder-item elements.

It starts at 800 as below that the mobile menu shows and there is no drop down. And the view changes around 1068px as the header moves onto a single line.

Hope this helps!

@media screen and (min-width:800px) {
    .header-nav-folder-content {
       transform: translateY(64px)
    }
}

@media screen and (min-width:1068px) {
    .header-nav-folder-content {
       transform: translateY(28px)
    }
}

Thanks so much!

Hey guys,

I have a question on the same code, which I have customised as much as I can but cannot get it to do what I want.

It looks great but I want to be able to set the opacity of the whole dropdown background block to be say 0.7 then when I roll over an item, for that item block to change to opacity: 0.3 for example.  I have successfully made the text opacity variable but not the other desired background elements mentioned above.

It is important to change the opacity and not add something like 'rgba(0,0,0,0.3);' as I want the option when I am using different colour header configurations (Minimal White / Minimal Black) for that not to have an inverted / adverse effect.  For example if I use 'minimal white' then 'minimal black' it doesn't work if you specify colours on an inverted space.

Appreciate your help.  Here is a link to the site - https://www.nintaidojo.co.uk/

And here is the current code:

//Stylized Folder Dropdown Menu
.header-nav-folder-content {
  background: transparent !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0.5em;
  left: -1em !important;
    right: auto !important;
    text-align: left !important;
  .header-nav-folder-item {
    padding: 0.5em 0.5em;
  }
   .header-nav-folder-item:hover {
    a {
      opacity: 0.5;
    }
  }
}

On 12/2/2020 at 5:01 PM, joelygoe said:

Hey guys,

I have a question on the same code, which I have customised as much as I can but cannot get it to do what I want.

It looks great but I want to be able to set the opacity of the whole dropdown background block to be say 0.7 then when I roll over an item, for that item block to change to opacity: 0.3 for example.  I have successfully made the text opacity variable but not the other desired background elements mentioned above.

It is important to change the opacity and not add something like 'rgba(0,0,0,0.3);' as I want the option when I am using different colour header configurations (Minimal White / Minimal Black) for that not to have an inverted / adverse effect.  For example if I use 'minimal white' then 'minimal black' it doesn't work if you specify colours on an inverted space.

Appreciate your help.  Here is a link to the site - https://www.nintaidojo.co.uk/

And here is the current code:

//Stylized Folder Dropdown Menu
.header-nav-folder-content {
  background: transparent !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0.5em;
  left: -1em !important;
    right: auto !important;
    text-align: left !important;
  .header-nav-folder-item {
    padding: 0.5em 0.5em;
  }
   .header-nav-folder-item:hover {
    a {
      opacity: 0.5;
    }
  }
}

Have you solved this yet?

5 hours ago, tuanphan said:

Have you solved this yet?

No.

Any ideas?

Add to Home > Design > Custom CSS

.header-nav-folder-content {
    background-color: rgba(0,0,0,0.7) !important;
}
.header-nav-folder-content a:hover {
    opacity: 0.3;
}

1 minute ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-folder-content {
    background-color: rgba(0,0,0,0.7) !important;
}
.header-nav-folder-content a:hover {
    opacity: 0.3;
}

 

Hey this worked really well both on white on dark and dark on white because a low opacity black. 

For anyone else struggling with here is the full and final code that worked for me but you can tweak all the values yourself:

//Stylized Folder Dropdown Menu
.header-nav-folder-content {
  background-color: rgba(0,0,0,0.1) !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0.5em;
  left: -1em !important;
    right: auto !important;
    text-align: left !important;
  .header-nav-folder-item {
    padding: 0.5em 0.5em;
  }
   .header-nav-folder-item:hover {
    a {
      opacity:0.7; 
    }
  }
}

Looks like this on a dark bg: https://www.nintaidojo.co.uk

Looks like this on white: https://www.nintaidojo.co.uk/meanings

Many thanks.  

If I wanteed to use that code to make adjustments to the rgba on a page by page level.  Is there a way I might do this.

For example I might write the code like this on Design > CSS

/Stylized Folder Dropdown Menu
.header-nav-folder-content {
  background-color: @linkBGColor !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0.5em;
  left: -1em !important;
    right: auto !important;
    text-align: left !important;
  .header-nav-folder-item {
    padding: 0.5em 0.5em;
  }
   .header-nav-folder-item:hover {
    a {
      opacity: @linkTextOpacity; 
    }
  }
}

Then on each individual page change the variable:

@linkBGColor: rgba(0,0,0,0.1)

@linkTextOpacity: 0.7; 

If the above code is correct.  How to I direct the @variable on the page?

Wrap code in style tag & add to Page Header

<style>

CSS

</style>

Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS

4 minutes ago, tuanphan said:

Wrap code in style tag & add to Page Header

<style>

CSS

</style>

Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS

Hi,

I can't code.  I only read then copy and paste so have no idea what t"Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS"  means.

I have put the following in to Design > CSS

//Stylized Folder Dropdown Menu
.header-nav-folder-content {
  background-color: @linkBGColor !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0.5em;
  left: -1em !important;
    right: auto !important;
    text-align: left !important;
  .header-nav-folder-item {
    padding: 0.5em 0.5em;
  }
   .header-nav-folder-item:hover {
    a {
      opacity: @linkTextOpacity; 
    }
  }
}

It is saying they are undefined.

Then in Pages > Home > Advanced

I have pasted:

<style>
@linkBGColor: rgba(0,0,0,0.1);
@linkTextOpacity: 0.7; 
</style>

and it doesn't seem to be working.

On 12/8/2020 at 9:50 AM, joelygoe said:

Hi,

I can't code.  I only read then copy and paste so have no idea what t"Notes: You need to convert SCSS/LESS to CSS. Page Header wont' render SCSS/LESS"  means.

I have put the following in to Design > CSS

//Stylized Folder Dropdown Menu
.header-nav-folder-content {
  background-color: @linkBGColor !important;
}
.header-nav .header-nav-item--folder .header-nav-folder-content {
  padding: 0.5em;
  left: -1em !important;
    right: auto !important;
    text-align: left !important;
  .header-nav-folder-item {
    padding: 0.5em 0.5em;
  }
   .header-nav-folder-item:hover {
    a {
      opacity: @linkTextOpacity; 
    }
  }
}

It is saying they are undefined.

Then in Pages > Home > Advanced

I have pasted:

<style>
@linkBGColor: rgba(0,0,0,0.1);
@linkTextOpacity: 0.7; 
</style>

and it doesn't seem to be working.

 

This was a while back but worth saying the SCSS/LESS is the use of variables (@linkBGColor and @linkTextOpacity). This is not valid CSS. It will work in the custom CSS as it converts it before putting it on the page. But CSS added to the page needs to be valid CSS.

If you need paste the code in each page then there is no real advantage or need for variables. The same code you use in the original CSS code be pasted in the head of each page - with a different colour needed.

Also nested selectors (classes within other classes) is not valid CSS so you need to change that too - which makes the 2nd opacity line much longer (but is the equivalent of the SCSS/LESS in custom CSS)

Hope this makes sense!!

<style>

.header-nav-folder-content {
  background-color: rgba(0,0,0,0.1) !important;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {
  opacity:0.7; 
}

</style>