Change menu icon to cog in collapsed (phone view)

My users will mainly be using the profile in phone (collapsed) mode.

Currently there are 2 different 3 bar icons on the profile, for clarity I want the top one to be a cog - ie. change settings.

What's the easiest way to change the icon to this?

They're both basically menus. The top one being a cog for settings won't make much sense with menu items like report user, send private message, etc.. under them. At any rate the only way to change it without modifying core code is with CSS. Right click and inspect element in Chrome or Firefox on the bar menu to see its CSS classes (shrink your browser window for it to go mobile display).

Hi Krileon,

Thanks for your help. I hear what you say, they're both menus, but the bottom one is more for vieing different tabs and the top is for editing (and/or other actions). At the moment, it doesn't make sense to have two identical icons - this is just confusing for the user so different icons makes more sense.

I realise that it's a CSS issue, but being a relatively newbie coder, I don't know what classes are available and/or how to change the icon to a cog. I thought it was a Bootstrap thing but the classes don't seem to match what I found on the net. Can you help me with the Css/code required to change the icon to a cog?

Cheers,

Dave

The below should do what you're wanting.


You can use a CB template override plugin to add your CSS to CB or add it to your Joomla template CSS file.

www.joomlapolis.com/forum/6-news-and-publicity/227459-cb-203-template-css-overrides