{"id":5498,"date":"2020-09-17T14:19:49","date_gmt":"2020-09-17T14:19:49","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5498"},"modified":"2020-11-27T19:15:14","modified_gmt":"2020-11-27T19:15:14","slug":"wordpress-dropdown-menus","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-dropdown-menus\/","title":{"rendered":"WordPress Dropdown Menus in a Nutshell [Creation and Styling Tips Included]"},"content":{"rendered":"

WordPress dropdown menus on today\u2019s menu!<\/span><\/p>\n

 <\/p>\n

Site navigation is of the utmost importance when developing your website. It affects the ways your visitors interact with your website, products. Their purchasing behavior will be decided by the structure of your website.<\/span><\/p>\n

 <\/p>\n

Dropdown menus (also called nested menus) help you solve for limited menu space. If you have more website pages that are really important and should belong to a menu, you need to figure out a proper page hierarchy.\u00a0<\/span><\/p>\n

Important: Before starting with the technical part, you must choose a theme that supports dropdown menus. Our very own Colibri <\/span>WordPress theme<\/span><\/a> supports this feature.<\/span><\/p>\n

 <\/p>\n

Now, let\u2019s see how we can build one.<\/span><\/p>\n

 <\/p>\n

How to create dropdown menus in the Classic WordPress editor in 3 steps<\/span><\/h2>\n

Step 1: Creating a simple WordPress menu<\/span><\/h3>\n

Go to the WordPress Dashboard and select \u201cMenus\u201d underneath \u201cAppearance\u201d<\/span><\/p>\n

\"Appearance<\/p>\n

Next, select \u201ccreate a new menu\u201d.<\/span><\/p>\n

\"create<\/p>\n

Now give it a name, and select \u201cCreate Menu\u201d<\/span><\/p>\n

\"Give<\/p>\n

Now you have created an empty menu. It\u2019s time to add some links to it.<\/span><\/p>\n

Step 2: Add items to the WordPress dropdown menu<\/span><\/h3>\n

What you have to do now is tick the items you need and add them to your menu.<\/span><\/p>\n

You can add to your menu:<\/span><\/p>\n

    \n
  • Pages<\/span><\/li>\n
  • Posts<\/span><\/li>\n
  • Custom links<\/span><\/li>\n
  • Blog categories<\/span><\/li>\n<\/ul>\n

    \"add<\/p>\n

    Need more pages? Go to Pages -> Add new.<\/span><\/p>\n

    \"Add<\/p>\n

    But how do you obtain the dropdown feature?<\/span><\/p>\n

    Easy peasy, just drag the page you want under the page it will belong to, like below:<\/span><\/p>\n

    \"Screen<\/a><\/div>\n

     <\/p>\n

    In the example below I added the blog categories as sub-items of the blog.<\/span><\/p>\n

    \"blog<\/p>\n

    On our Colibri website, we went for a custom links menu approach.<\/span><\/p>\n

    We do not have separate pages for every menu item, instead we are using anchors and have a single page layout.<\/span><\/p>\n

    This means that whenever you select a menu item, your cursor will position itself to the specific section on the page.<\/span><\/p>\n

    \"Custom<\/p>\n

    \"Anchored<\/p>\n

    You can use custom pages when you want to link to external pages or even your social media profiles.<\/span><\/p>\n

     <\/p>\n

    Step 3: Select menu location<\/span><\/h3>\n

    Satisfied with your menu?<\/span><\/p>\n

    If yes, it\u2019s time to decide where you want to place it. Is it the main navigation? Do you want a left-hand side dropdown menu?<\/span><\/p>\n

    These are your options:<\/span><\/p>\n

      \n
    • Main Navigation<\/span><\/li>\n
    • Top Menu<\/span><\/li>\n
    • Primary Menu<\/span><\/li>\n
    • Footer Menu<\/span><\/li>\n<\/ul>\n

      Under \u201cMenu Settings\u201d you can choose the location for your menu.<\/span><\/p>\n

      \"WordPress<\/p>\n

      Next, just hit \u201cSave Menu\u201d and you\u2019re done!<\/span><\/p>\n

      Congrats, you\u2019ve just built your first WordPress dropdown menu.<\/span><\/p>\n

       <\/p>\n

      How to style WordPress dropdown menus<\/span><\/h2>\n

       <\/p>\n

      Do you want to take your WordPress dropdown menu to a whole new level through styling?<\/span><\/p>\n

       <\/p>\n

      We\u2019ve got 2 methods for you.<\/span><\/p>\n

       <\/p>\n

      1.<\/span> WordPress dropdown menus styling via plugins<\/span><\/h4>\n

      If you\u2019re not a CSS aficionado, then this is for you. You won\u2019t need to write a single line of code.<\/span><\/p>\n

       <\/p>\n

      CSS Hero<\/span><\/a> is one of the most popular WordPress plugins that let you stylize with no code.<\/span><\/p>\n

       <\/p>\n

      Here\u2019s how you can install and activate WordPress plugins.<\/span><\/p>\n