Help removing text from menu, leaving just symbols like mobile?

[Random Username]

Could someone throw me a bone? I'd like symbols only for both text and mobile...

Thank you. 

[Kindred]

It's a bad idea...  but if you must, adjust the css

[Random Username]

Hey, Kindred. I love how you're always looking out for me and the software and your team. You're a good guy. Why is it a bad idea? Any hint on where in the CSS? I'm really getting better at this stuff but I'm still a rookie.

[Kindred]

It's a bad idea, because not all users are visually cued by icons.
It's done on Mobile devices because the space savings is more important,  but on a screen that has the space,  icon+words is best, words only is ok, icon only is recommended as no.

I don't know the specific css section off the top of my head, but i do know that that's how the wide screen vs mobile screen shift is controlled in the first place

[Random Username]

That's cool. My menu is fairly crowded though because I combined the two menus into the top one. Vertical space is critical foy my site. In time I will be wanting to add a couple things to the menu via the CMS so the space is going to come in handy. Thanks. I will find it.

[TwitchisMental]

This should do the trick -

Code Select Expand

.dropmenu .textmenu, #top_info .textmenu {
  display: none;
}

[Random Username]

Hey @TwitchisMental, I super appreciate the help but I can't find that anywhere. I searched every css file in my theme and then in the pristine install package to no avail? What am I missing? lol

[[chrisB]]

Hey @TwitchisMental, I super appreciate the help but I can't find that anywhere. I searched every css file in my theme and then in the pristine install package to no avail? What am I missing? lol

Add it to your responsive.css at the very bottom.

[Random Username]

Hey, unfortunately when I did that Messages and Alerts weren't there at all anymore. Weird.

[Random Username]

Well, I guess it makes sense because there aren't symbols for those on desktop.

[Steve]

Add it to your responsive.css at the very bottom.

Try adding it to the default theme's index.css instead.

[Random Username]

Same thing, I'm afraid. No Messages or Alerts. Strange there are symbols for everything else on desktop. I prefer consistency. Figure my users will learn the icons.

[Steve]

Okay, will have to wait for @TwitchisMental to respond to your which file question then.

[Random Username]

I appreciate all the help. You guys rock.

[Kindred]

That's because messages and alerts are a different sort of menu and, as you noted, don't have icons.

You opted to do a custom menu that combines things that smf had kept separate....  so you're going to need custom coding and css as well

[Random Username]

Understood.

[TwitchisMental]

Hey, unfortunately when I did that Messages and Alerts weren't there at all anymore. Weird.

Ah yes, you'd have to allow those icons to show in desktop view.

open your index.css and find -

Code Select Expand

#pm_menu_top .main_icons, #alerts_menu_top .main_icons {
  display: none;
}
change to

Code Select Expand

#pm_menu_top .main_icons, #alerts_menu_top .main_icons {
  display: inline-block;
}

[Random Username]

Hey, that worked like a charm! But, see, I was also hoping it was going to solve a problem I have. The larger user control panel drop down and the alert and message dropdowns aren't overlapping the background elements as they should. I thought it was because there wasn't enough room on the menu bar but apparently I was wrong. I made a mistake thinking the difference was caused by limitations in the test site when I only checked one theme. I've changed all the template files out and sources and the problem persists. It can only be something in the .css file I messed up. It seems like a needle in a haystack to me. Can you possible point me in the right direction? And, regardless, @TwitchisMental, if you shoot me a PM, I'd like to buy you a beer for the help already given.You cannot view this attachment.You cannot view this attachment.

*Just thought there must be tools to compare text files...so on hunt.*

[TwitchisMental]

Hey, that worked like a charm! But, see, I was also hoping it was going to solve a problem I have. The larger user control panel drop down and the alert and message dropdowns aren't overlapping the background elements as they should. I thought it was because there wasn't enough room on the menu bar but apparently I was wrong. I made a mistake thinking the difference was caused by limitations in the test site when I only checked one theme. I've changed all the template files out and sources and the problem persists. It can only be something in the .css file I messed up. It seems like a needle in a haystack to me. Can you possible point me in the right direction? And, regardless, @TwitchisMental, if you shoot me a PM, I'd like to buy you a beer for the help already given.You cannot view this attachment.You cannot view this attachment.

*Just thought there must be tools to compare text files...so on hunt.*

It would be easier for me to find the issue with a link to the site in question.

You can PM me the link if needed.  I will take a look in a few hours.

[Random Username]

Hey, no idea how it happened but I had a bunch of extra stuff in the css file. Thank you very much, @TwitchisMental. Shoot me an email and I'll throw you a reward.

[Random Username]

Hey, I still have a problem on mobile. When logged out, the menu items are listing down the screen instead of across it.  Sigh. This menu is going to kill me.

Thanks again!!You cannot view this attachment.

[Antechinus]

It's a bad idea, because not all users are visually cued by icons.
It's done on Mobile devices because the space savings is more important,  but on a screen that has the space,  icon+words is best...

TBH, I find that most of the time icons just get in the way of scanning the menu, but it depends how many items there are. If there are only a few, icons are ok. If there is a list of a dozen items, I'd rather just have the text.

[Random Username]

I haven't decided whether to keep the icons only. I thought the problem was because the menu was too crowded. It seems that isn't the case. I just don't want to mess with the code until I find a solution. I probably will use both text and icons.

[TwitchisMental]

Hey, I still have a problem on mobile. When logged out, the menu items are listing down the screen instead of across it.  Sigh. This menu is going to kill me.

Thanks again!!tempFileForShare_20230128-062650.2jpg.jpg

To be fair this is the way it is designed since it is for mobile.. Making this left to right is most likely not going to fit horizontal wise on mobile devices.

If you must do this using display: inline for the dropmenu li is what you would need to do in the responsive css.

[Random Username]

I hear what you're saying. If it doesn't fit, I have another idea. I added this to the bottom of responsive.css but it didn't work:

Code Select Expand

.dropmenu li {
    display:inline;
}

[Random Username]

So, this is resolved. My developer made a toggle to make the menu go on and off screen.

Thank you for all the help!