Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in


Written by Michał Krawczyk ,

See: Horizontal Menu documentation page

This component has been renamed. All features of Navbar has NOT been changed. Now this component is called Horizontal Menu.

  1. Go to the Appearance and Menus. Name your new menu (e.g., Navbar), and click "Create Menu".
  2. You may add any link to the Navbar - to the pages, posts, categories or even to the other websites.
  3. On the left side in the Pages, Posts, Custom links or Categories sections find and select whatever you want to be in your Navbar.
  4. Then click Add to Menu - items will immediately appear in the Menu Structure on the right.
  5. Don’t forget to tick Navbar Menu in the Menu Settings below the Menu Structure. Otherwise, it will be impossible to upload the proper documentation which will allow WordPress to add your Navbar.
  6. Then Save Menu.
  7. Next step is to go to the MDW Config and then Navigation.
  8. To make Navbar visible, select Navbar in the Navigation type (or Sidenav & Navbar if you want to have them both). In comparison with Sidenav, Navbar has more styles of appearance:
    • Basic - Navbar visible, but it hides when you scroll it down
    • Fixed top - visible all the time, even if you scroll down the page
    • Fixed bottom - same as Fixed top, but Navbar is on the bottom
    • Scrolling - Navbar is becoming shorter while scrolling down the page, but up to the fixed point.
  9. If everything is ready, click Save and publish.

  10. It is possible to nest one item in another to receive collapsable menu item like in an image below.
  11. Navbar with collapsed items - Material Design for WordPress
  12. Go to the Appearance/Menus. Select a Sidenav menu and add a new item.
  13. Now drag your new item - under the item where you want to nest it into, then move it slowly to the right until rectangle dashed line skip to the nested position (see the image).
  14. Parent - child relation in Menus - Material Design for WordPress
  15. Repeat the process for the other items you want to nest.
  16. Save the changes.

Do you want to share?

About author

User avatar

Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research background, student of Interfaculty Individual Studies in the Humanities at the Jagiellonian University

Leave a reply

Card image cap

Stay up to date

Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.