December 27, 2022/6 comments/

Menu Item Descriptions in Bricks

Categories: Bricks, Pro
Tags: Nav Menu, walker_nav_menu_start_el

This Pro tutorial provides the steps to show descriptions for nav menu items with the corresponding CSS styling for desktops and mobiles in Bricks.

Step 1

Edit your nav menu at Appearance → Menus.

Click Screen Options and tick "Description".

Enter the descriptions for your menu items.

Step 2

This is a Pro members-only tutorial.

To get full access, login below or sign up for a Pro Account

Sridhar Katakam

Sridhar Katakam is a WordPress expert with more than 12 years of experience. Sridhar is the founder of WPDevDesign and BricksLabs. He lives in Melbourne, Australia.

  • Maya Nikolova
    4 weeks ago Reply

    Hi Sridhar, apologies for late reply, I assumed I would get an email and didn’t even look here.
    Yes the icon does appear under the top level menu, but it does look odd…to me haha. Maybe it’s just habit of seeing it to the right.
    But yes you are right that it would not be an issue if the descriptions are not showing in the desktop menu. So a big thank you for the replacement css, super helpful.

  • Maya Nikolova
    4 weeks ago Reply

    Hey Sridhar, this is great. Could I ask for a couple of improvements if possible. These are:
    1. Add code to make it look good when nav items have a sub menu and an icon indicating that. At the moment the icon is placed under the whole label/description, because of the display: flex and column direction. It looks a little odd
    2. Have the ability to hide the descriptions in the top level menu, and only show them in the sub menus and mobile menus where they are displayed vertically, as it looks best in those scenarios.

    Thank you!

    • A
      Sridhar Katakam
      4 weeks ago Reply

      Hey Maya.

      1. Can you show me a screenshot? Just tried this and it shows the selected icon under the top level menu item. https://d.pr/i/DdubWW. But this should be a non-issue if you don’t want the description labels to appear on desktops (see #2 below).

      2. Replacing the CSS in the tutorial with the one here will take care of this: https://pastebin.com/raw/RxuWtT4A.

      • Maya Nikolova
        4 weeks ago Reply

        Hi Sridhar, thanks again for looking at this. I did some testing and wanted to explain what I was after. I wanted the descriptions to be displayed when we show the submenu and mobile menu only as opposed to show at a mobile break point.
        I also believe the styling should allow for longer descriptions to show where the text wraps at certain width. Anyway, I did have my own code that I was using, but yours was a little more targeted, so wanted to use that instead. This is a link to my php/css, I am using ACSS so some of the colour/font size variables refer to that: https://pastebin.com/tJkqgvFd

        I quite like the look of this however wanted the ability to not show descriptions when the top menu is displayed only, otherwise (for sub menus and mobile menus to show it. Is taht possible or is this outside the scope of this tutorial? Happy with whatever you say and thanks again.

Leave your comment

Related Post(s)