Removing Main Menu Text In Responsive Mode

[live627]

Why is the span needed? Isn't it bloat? Why not text-indent: -9999px;?

[Hj Ahmad Rasyid Hj Ismail]

Isn't it because of the reason I already mentioned above? If without span, anything or everything done to li a css will affect the menu icons as well, as its span is inside the li a. If one just want to remove the menu text without affecting the menu icons, he cannot do it without a specific span targeting only the menu text.

I have tested li a -9999px and its result is almost the same with display none to it i.e. menu icons also went hidden. Really, if that can be done, please share it here as I really want to know how to do it as well. I will be very happy if that is workable only via css edit without having to restore the span because that is why I asked for support here.

About span for menu text being a bloat, I am not so sure how to resolve it since we already have span for menu icons. Will too many span created just for main menu text using this? The current solution is the simplest solution that I can come with to remove the text from the menu in the smallest screen.

The followings are just a thought: But could we shift as between the span for menu icons to menu text? Can the menu icons stand without the span? Will it be too much shifting (cleaning) work? Is it worth it?

This thought raises too much questions even for me as I am not sure how the menu icons is coded. The released SMF 2.1 Beta 1 seems different in that sense with the one in the github making it harder for me to help with this part. I also do not want to burden the SMF Team with this unnecessary changes, if possible.

[Sesquipedalian]

The following can do the job without adding in the <span>'s. Just add it to responsive.css and off you go. However, it doesn't do anything about the dropdown menus, which will spill over the side of the page at narrow resolutions unless you do something about that (I leave it as an exercise to the reader ).

Code Select Expand


@media (max-width: 480px) {
ul#menu_nav > li {
width: auto;
}
ul#menu_nav > li > a {
width: 17px;
height: 20px;
overflow: hidden;
}
}


Using > targets the immediate child of an element, so ul#menu_nav > li targets the li elements that are direct children of ul#menu_nav, and no others. In contrast ul#menu_nav li would target all li children, grandchildren, greatgrandchildren, etc. of ul#menu_nav. So, Antes is entirely right (as one would expect) that a <span> inside the <a> is not necessary.

As for how I hid the text, it is simply a matter of defining the dimensions explicitly and then using overflow: hidden to make sure that the text disappears when it spills out.

[Antechinus]

As several people have pointed out, a span is not necessary here, and using display: none; on a span would be bad for a11y anyway. It's not good practice at all.

There are several ways of getting the text hidden and the icon visible. My usual way of doing this is with overflow: hidden; and text-indent: 100%; and white-space: nowrap;

This is bulletproof even if you don't define the height of the anchor, and gives you plenty of latitude on width. To stop the icon being hidden you can just use absolute positioning on it. So in general:

Code Select Expand

@media (max-width: 480px) {
#menu_nav > li > a {
position: relative;
width: 32px; /* Might as well give a decent target for fingers */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;

}
#menu_nav > li > a > .generic_icons {
position: absolute;
top: whatever suits;
left: 8px;
}
}