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.
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.
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.
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).
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.
Maya Nikolova
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
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!
Sridhar Katakam
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
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.
Sridhar Katakam
Can you provide the URL of your site?
Maya Nikolova
I will submit a ticket if that is OK.