Show menu item icons only on mobile layout

[NFXDD]

Hi there. I notice that the “Live Notifications” menu item on smaller screens only displays the icon and removes the navigation label. Then you the icon displays next to the mobile menu toggle. Which is pretty neat.

How can one make other menu items behave in the same way?

So essentially what would happen is My menu items have labels and icons on the desktop view, but on mobile devices it will display the icons only.

[Laura]

Hello, it can be done with css, can you let me know which ones?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[NFXDD]

Hi hi. On my main menu it is: Activity, Groups, Directory and the My Account avatar.

My thinking is that way then instead of the main menu toggle being there on mobile one would have the main menu items’ icons instead.

Another thing I thought of (sorry), is there a way to get the notifications icon show the notifications pop out when tapped on mobile. Like the hover effect on on desktop?

[Laura]

Hello, please add this to style.css

COPY CODE

@media (max-width: 991px) {
#header .navbar-nav>li>a {
    color: white;
}
ul#menu-main-menu i:before {
    color: #53C3ED !important;
}
}

The notification pop out is not available

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[NFXDD]

That’s great thank you. Just one thing though, the menu items are all still displayed in the mobile menu now though. I would like the icons to stay in the header and not be pushed in to the mobile menu on mobile screens. The same as with the notifications Icon and not have a mobile menu and toggle at all.

[NFXDD]

Oh wait, I just realized what your css does lol. Yeah not what I am looking for. I need the same function/behavior like with the notifications Icon.

[Laura]

Hello, i see, then you might need to contact a developer for that as it would require some time

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[NFXDD]

Can I contact you then? lol.

[Laura]

Hello, i do not have much time right now for this type of request, but i can help you with anything else 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[kent]

i’m looking for the same style… nice if someone can give us some info on how to place a notification icon at the top of the side menu…

[Laura]

Hello, right now its not possible but a freelancer could do that for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[kent]

How do I show the notification bell and the shoppingcart before the search form in the sidemenu?

any shortcodes i can use for this in the “Before Menu text” in Theme Options > side menu?

[kent]

can I also show the Kleo my account (kleo-menu kleo-user_avatar-nav) here?

I want to show the shoppingcart, my account with avatar and the live notification bell in the sidemenu “Before Menu text”.

[Laura]

Hello, you will need to edit theme files so i suggest to hire a freelancer 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts