🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Mega-Site Navigation

Navigation template for mega-sites.

Copy: View demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

How to

The Mega-Site Navigation component is a navigation template for mega-sites.

To set when to switch from the --mobile version (where the navigation is collapsed) to the --desktop version (where the navigation is expanded), use the [email protected]{breakpoint} class, where {breakpoint} can be "xs", "sm", "md", "lg", or "xl".

<header class="mega-nav mega-nav--mobile [email protected] js-mega-nav">
  <!-- navigation content -->
</header>

To make customizing the navigation elements easier, in SCSS, we use the .mega-nav--mobile class to target the style affecting only small devices, and .mega-nav--desktop to target only big devices. In JavaScript, we remove the .mega-nav--mobile class and add .mega-nav--desktop, depending on the value of [email protected]{breakpoint}.

By doing so, we keep the style of the two navigation versions (--mobile and --desktop) separated, and you don't need to reset/override the style while working on the --desktop version.

// --------------------------------

// --mobile

// --------------------------------

.mega-nav--mobile {
  // style affecting only small screens
}

// --------------------------------

// --desktop

// --------------------------------

.mega-nav--desktop {
  // style affecting only big screens
}

If you want the header to be fixed, from the .mega-nav element:

  • Remove the .position-relative utility class;
  • Add the .position-sticky and the .top-0 utility classes.
<header class="mega-nav mega-nav--mobile [email protected] position-sticky top-0 js-mega-nav">
  <!-- header content here -->
</header>

Layouts #

The component includes 4 layout options for the sub nanigation items. A layout is set adding the .mega-nav__sub-nav--layout-{number} class to the .mega-nav__sub-nav element.

  • mega-nav__sub-nav--layout-1 -> links on smaller screens, tabbed content on bigger screens
  • mega-nav__sub-nav--layout-2 -> multiple lists of links
  • mega-nav__sub-nav--layout-3 -> gallery
  • mega-nav__sub-nav--layout-4 -> single list of links

🌅 Demo images:

Categories

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us