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)

9 Comments

  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





showcase-websites-front-1

Submit Beaver Builder built websites to feature in the "showcase" section on ProBeaver