Articles in this section

See more

Creating a sub-navigation / dropdown menu / subnav system

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

 

Since Semplice is primarily for portfolio building, subnavigation systems are not native to Semplice. We recommend simply creating landing pages that show your different project categories, or using the Category Filter with the portfolio grid.

That said, you can use this hack if you need a simple sub-nav on your site.

You can see a live demo of this hack in action here.

 

subnavigation.gif

Step 1: Setting up your sub-navigation

In WordPress, go to Appearance > Menus. Now drag the items you want in your sub-nav below a parent menu item.

creating-submenu.gif

You can also use projects in your sub-menu. While editing your menu, you can add them using the "Custom Links" feature. The project URLs should look like this: /project/my-project

 

Step 2: Adding the styles

Now, you will need to add the following CSS properties to style the subnavigation system you created. Keep in mind, since everyone's menu systems are different, you may need to modify the CSS to fit your particular setup.

In Semplice, place the following code under CSS under Customize > Advanced > Custom CSS > Global:

 

.standard .menu-item {position: relative;}

/* Main Styling for Subnav */

.standard .sub-menu {
  position: absolute !important;
  background: #FFF !important;
  height: auto !important;
  width: 160px !important;
  padding: 20px 14px !important;
  border-radius: 0px !important;
  box-shadow: 2px 2px 6px 4px rgba(0,0,0,0.15) !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: ease 0.5s all !important;
  display: block !important;
  left: 50% !important;
  top: 20px !important;
  transform: translateX(-50%) !important;
  margin-top: 20px !important;
  z-index: 0 !important;
}

/* Subnav Reveal Effects */

.standard .menu-item:hover .sub-menu {
  opacity: 1 !important;
  margin-top: 0px !important;
  z-index: 5 !important;
}

/* Subnav List Item Spacing */

.standard .sub-menu li {
  margin-bottom: 10px !important;
}

.standard .sub-menu li:last-child {
  margin-bottom: 0px !important;
}

/* Subnav List Item Styling */

.standard .sub-menu li a span {
  color: #222 !important;
  font-size: 15px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  font-weight: 400;
}

/* Subnav List Item Hover Effects */

.standard .sub-menu li:hover a span {
  color: #000 !important;
}

/* Overlay Menu Subnav Spacing */

#overlay-menu .sub-menu {
  padding: 10px !important;
}

/* Overlay Menu Subnav Item Styling */

#overlay-menu .sub-menu li a span {
  color: #222 !important;
  font-size: 16px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* Overlay Menu Subnav Item Hover Effects */

#overlay-menu .sub-menu li a span {
  color: #000 !important;
}

 

That's it! You now have a simple sub-navigation system in Semplice.

Related articles