News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

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

Started by Random Username, January 27, 2023, 05:30:44 AM

Previous topic - Next topic

Random Username

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

Thank you.  ;D

Kindred

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

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
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

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 -

.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]

Quote from: Random Username on January 27, 2023, 12:28:03 PMHey @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.
I'm stuck in a time warp from the early 00's.

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

Quote from: [chrisB] on January 27, 2023, 12:31:05 PMAdd it to your responsive.css at the very bottom.
Try adding it to the default theme's index.css instead.
DO NOT pm me for support!

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.
DO NOT pm me for support!

Random Username


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
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."


TwitchisMental

Quote from: Random Username on January 27, 2023, 12:39:57 PMHey, 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 -

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

change to

#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

Quote from: Random Username on January 27, 2023, 04:23:13 PMHey, 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

Quote from: Kindred on January 27, 2023, 08:32:51 AMIt'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

#23
Quote from: Random Username on January 28, 2023, 06:30:49 AMHey, 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:
.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!

Advertisement: