Click

1. Insert Dropdown

Style all the components as preferred.

OBS! Do not apply padding to the Dropdown List Element. That will cause the closing of the Accordion to be jumpy. Instead, place a Div inside the Dropdown List Element and let the Div serve as the wrapper of your contents in the accordion. Add the padding to this Div instead and leave

2. Select the Dropdown List

Open the Dropdown and add the contents of your choice.

position: relative = Dropdown list pushes down objects placed below the Dropdown 
position: absolte (default) = Dropdown list overlay objects placed below the Dropdown
overflow: hidden

1. Select the Dropdown List element

Create a new interaction and give it a name.
Select Initial Appearance and style it:

display: none
opacity: 0 %

2. Select Dropdown Toggle-element.

Create a new interaction and give it a name.
Select the trigger of Dropdown, select Affect different element and type in the class name of the Dropdown list-element.
Style it:

Dropdown Open

height: auto

Dropdown Open

height: 0 px

3. Multiple dropdowns

If you have multiple dropdown accordions stacked on top of each other, make sure that you select Limit to sibling emelents.

4. Select Dropdown-element.

Give the dropdown a Close Delay value of your choice, preferably same as the transition time selected in the interaction.

1. Add a button

Style it as preferred. The text you have at the default state of your button in the Webflow designer needs to be the same where the default state text is in the javascript code.

1. Change on hover

$(document).ready(function() {    
$('.your-button').hover(function() {      
$(this).html('Put your hover text here');    }, function() {      
$(this).html('Default state text');    });  });

2. Change on click

$('.your-button').click(function()
{
if ($(this).text() == "Click me...")
{
$(this).text("...to change text");
}
else
{
$(this).text("Click me...");
};
});

1. Add a nav and give it an class name of your choice

Place in where you want it. Style it:

position: fixed

1. Paste code and change class name

Replace name-of-your-nav with your nav class name.

.scrolling {
background-color: rgb(32, 32, 32); opacity: 0.5; 
transition-duration: 1s;
}

1. Paste code and change class name

Replace name-of-your-nav with your nav class name. To change the transition point, change the value of 100 to your choice.

$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
if ($(window).scrollTop() > 100 ){
$('.navigation').addClass('scrolling');
} else {
$('.navigation').removeClass('scrolling');
}; 
});

$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});

1. Insert two Nav Widgets

Give the main Nav Bar widgets different class names, e.g Nav Bottom and Nav Sticky.
Style the rest of the nav contents as preferred. You can probably share the same classes between the two nav widgets.
Style one of the nav widgets to:

position: fixed (top)
z-index: 1001 [higher the bottom Nav widget]

1. Select the Hero Section (or the element used to trigger the nav stick) and add interaction.

Go to the Global Objects panel and give the interaction a name.
Select the trigger of Scroll.
Check the Affect different element(s) and type in the class of the fixed nav bar widget

2. On Scroll Into View, add these settings:

Step 1:

display: none

3. On Scroll Out View, add these settings:

Step 1:

display: block

Click Done when finished.

1. Set body to 100%

2. Insert a Nav Widget

Give it a class and change the settings so the hamburger icon is visible on desktop mode.
Style the Nav Widget as preferred, but this needs to be set:

position: fixed (top)

3. Style the rest of the nav elements

Give them classes and style as preferred.

4. Select Nav Menu Button element

Use these settings:

position: relative
z-index: 1001 (always set it higher than the Nav Bar Widget which has a default value of 1000)

5. Style Nav Menu element

Give it a class and style if as preferred but these settings needs to be set for the Nav Menu:

position: fixed (full)
menu type: dropdown

1. Set body to 100%

2. Create a Section or Div

Place in where you want it. If you want the nav to be fixed at the top, style it:

position: fixed
z-index: 1

3. Insert a Link Block and icon (usually hamburger)

Give the Link Block a class of Nav Menu Button. Style it as preferred.
Give the nav icon a class of Nav Icon and style it as preferred. 
This setting needs to be set for the Nav Menu Button:

position: relative
z-index: 2 (or higher as it needs to be placed above the coming Nav Menu).

4. Create a Div

Place it inside the section of Nav. Give it a class of Nav Menu. 
Style it as preferred but these settings are needed:

width: 100%
height: 100%
position: fixed (full setting)
z-index: 1 (this nav menu have to be layered underneath the Nav Menu Button element)

5. Insert content into section of Nav Menu

This nav design type usually comes with the intention of having few and big links. If you have so many links that your overlayered nav needs to be scrollable, set this setting on the section of Nav Menu:

overflow: scroll

6. Hide section of Nav Menu

Style it:

opacity: 0%
display: none

1. Select Nav Menu Icon

Give the interaction a name.
Select the trigger of Click.
Check the Affect different element(s) and type in the class of Nav Menu.

1. On First Click, add these settings:

Step 1

opacity: your choice
display: block

2. On Second Click, add these settings:

Step 1

opacity: 0%

Step 2

display: none

1. Create tabs from Tabs widget

Style it the preferred way.

2. Give each tab a unique class

Only the tab itself need to be unique. The rest of the elements in the tab widget can share the same styles for a second tab widget.

3. Select link and go to Link Settings

Select the link you want to be aimed for the tab. In the URL field put: /slug-name/name-of-page?tab=your-tab-class
Lowcase letters MUST be used and white spaces between words are replaced with a ”-” (dash) !

1. Paste code

var Webflow = Webflow || [];
Webflow.push(function () {
var tabName = getParam('tab');
if (!tabName) return;

$('.' + tabName).triggerHandler('click');

function getParam(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].
replace(/\+/g, " "));
}
});