• ProBeaver Weekly
    Weekly for all things Beaver

  • Add arrow to menu items with sub-items in Beaver theme

    Want to make the default menu in Beaver Builder theme more usable? How about adding arrow icon to menu items that contain sub-items automatically? With arrows in place, user can easily identify which menu items contain sub menu-items and this also looks more professional.

    Before & After: Arrow icon next to menu items

    Arrow next to menu items with sub-items in beaver builder theme

    Code to add arrow next to menu items with sub-items

    1. In WordPress dashboard, go to Appearance > Editor.
    2. Click on “Stylesheet” style.css option. You should be using Beaver Builder child theme.
    3. Add the following code at bottom of the file.

    4. Save change by clicking “Update File” button and preview your website with menu sporting cool looking down arrow icon.

    Davinder Singh Kainth

    About Davinder Singh Kainth

    Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)


    1. Roberto on August 16, 2016 at 1:11 pm

      Really useful. Bookmarking this one.
      Thanks Davinder!

    2. Hannu on August 19, 2016 at 6:15 am

      Nice! Thanks for the tip!

    3. Simon Kelly on September 15, 2016 at 9:54 pm

      Great tip Davinder, this is much better than manually adding the HTML to the menu.

    4. Rajesh Bethu on February 5, 2017 at 7:22 pm

      Thank you very much.This is very simple and effective.nice, thanks.

    5. Eric Malcolm on February 13, 2017 at 5:08 pm

      Worked perfect, thanks!

    Leave a Comment

  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs


    A premium modern agency template for Beaver Builder users