Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

WordPress Horizontal Menu

Written by Michał Krawczyk ,

Former component name: Navbar

  1. Go to the Appearance and Menus. Name your new menu, and click "Create Menu".
  2. You may add any link to the Menu - 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 menu.
  4. Then click Add to Menu - items will immediately appear in the Menu Structure on the right.
  5. Don’t forget to tick Horizontal 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 menu.
  6. Then Save Menu.
  7. Next step is to go to the MDW Config and then Navigation.
  8. To make Horizontal Menu visible, select Horizontal Menu in the Navigation type (or Both if you want to have them both). In comparison with Sidebar Menu, Horizontal navigation has more styles of appearance:
    • Basic - 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 menu is on the bottom
    • Scrolling - navigation bar 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. Horizontal Menu with collapsed items - Material Design for WordPress
  12. Go to the Appearance/Menus. Select a Horizontal Menu 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.