Removing Main Menu Text In Responsive Mode

[Hj Ahmad Rasyid Hj Ismail]

How to remove the main menu text when we are in a mobile responsive mode without loosing the link? I can easily remove the text by eg. li#button_home a {display:none;} but that will remove the purpose of the menu itself i.e. no link. In 2.0, we have a span for the text which make it easy to remove the main menu text eg. by using li#button_home a span {display:none;} without losing its link. Any other "responsive" way of doing it?

[Kindred]

I'd suggest checking how Bloc did it for his responsive themes for 2.0.x

text is replaced by icons once it gets below a certain width

[margarett]

Our "responsive MOD" for 2.0 also does that but 2.1 is different

Antes should be here anytime soon

[Antes]

SMF 2.1 has newer version of SuperFish, which allows all devices (using Android + iOS + WP) to tap once to open the menu and second tap follows the link. That's why we don't need to change text buttons into icons.

[Hj Ahmad Rasyid Hj Ismail]

Are you getting my question? What I want is the main menu text removed in a "responsive" way in SMF 2.1 and maintain the icons and links in mobile / small screen view. My question - "how do i do that?".

[Kindred]

and we answered you.  Look at how bloc did it or how the responsive "patch" for 2.0 did it...

[Antes]

well considering your question already answered by Kindred & margarett, I just gave you extra information why you shouldn't spend time on doing something not needed.

[margarett]

To be honest, I think we are not seeing what he wants to do...

In 2.1, when we resize the screen, it goes like this first image attached

And resizing it even further, the menu goes vertically aligned (second image)

I think that he is trying to remove the button texts just keeping the icons side by side (like we have in 2.0 responsive). A mockup  in Paint allmighty!!! , third image (forgot to take out Logout ehehehe)

[Hj Ahmad Rasyid Hj Ismail]

You get it right margarett. SMF 2.1 does not have span as 2.0. Thus, this question is asked.

[margarett]

If only I knew how to do it

[Hj Ahmad Rasyid Hj Ismail]

I see your paint can do it. lol. I have compared the code between 2.0 and 2.1 and the difference for easy customization via css is only <span>menu text</span> which is removed in 2.1. This removed the ability to hide menu text via css without removing the icons in smaller screen.

[Kindred]

that is because they don't use a SPAN... but they still use an ID and class specific to the button.



I understood what you wanted right from the start...   you can do the same thing as 2.0 does... but you have to use a little human intelligence to figure out that, even though there is no span, you can apply the same process to the menu items

[Hj Ahmad Rasyid Hj Ismail]

Sorry Kindred but so far it cannot be done and thus, this support question. Without the span, using display none will remove the links, while using visibility hidden will maintan the text space though non visible. So far, I was not able to do it in a responsive way.

Other way is to add back the span either by its template or text file.

[Antes]

Code (Find) Select Expand

', $button['icon'], $button['title'], '

Code (Replace) Select Expand

', $button['icon'],'<span class="hide_me">', $button['title'], '</span>

is all you need, then you can fix the stuff in CSS.

[Gluz]

A hacky approach to that is:

in responsive.css delete

Code Select Expand

.dropmenu li {
    width: 50%;
}

and replace:

Code Select Expand

.dropmenu li a {
    width: 65%;
}

by:

Code Select Expand

.dropmenu li a {
    font-size: 0px;
}


I know is not the best coding but does the trick.

[Hj Ahmad Rasyid Hj Ismail]

Thank you Antes and Gluz. I did test what Gluz suggest and that does not remove the text but align the menu icons horizontally. Antes suggestion is what I have in mind but I was thinking whether it is possible to do it without the span as that is what the default is in 2.1 Beta 1.

The solution to make the menu icons without text aligned horizontally that I have for now is as follows:

1. In index.template.php, find

Code Select Expand

', $button['title'], '
Change with

Code Select Expand

<span class="textmenu">', $button['title'], '</span>

2. And in responsive.css, find

Code Select Expand


.dropmenu li {
width: 50%;
}

Replace with:

Code Select Expand


.dropmenu li {
width: 10%;
}
.dropmenu li span.textmenu {
display:none;
}

I guess we still be needing that span after all for easy customization and I would suggest that the span be restored in 2.1. I will mark the topic as solved.

[margarett]

I guess we still be needing that span after all for easy customization and I would suggest that span be restored in 2.1. I will mark the topic as solved.

PR?

for the record, I also think that the span should be there. Easy customization, no bloat added

[Antes]

I guess we still be needing that span after all for easy customization and I would suggest that span be restored in 2.1. I will mark the topic as solved.

PR?

for the record, I also think that the span should be there. Easy customization, no bloat added

It is not needed. Because menu is mobile-friendly. Don't create impression that current state of menu is not mobile friendly, its not cool.

[Hj Ahmad Rasyid Hj Ismail]

I guess we still be needing that span after all for easy customization and I would suggest that span be restored in 2.1. I will mark the topic as solved.

PR?

for the record, I also think that the span should be there. Easy customization, no bloat added

It is not needed. Because menu is mobile-friendly. Don't create impression that current state of menu is not mobile friendly, its not cool.

Sorry, if my words seems to suggest it that way. Really, I don't mean to say what you have just said Antes. The current state of menu is already mobile friendly. The suggestion to add back the span is not stating it otherwise as the suggestion is only meant for easy customization. That is all about it.

[Kindred]

Actually, Antes --  I tend to agree with the request.

The menu *IS* mobile friendly and sorts itself nicely as the screen shrinks.
However, adding the span tags does allow for simple and easy cusotmization
(and, personally, I prefer the icon only design at smaller screen sizes)

I was under the impression that it could be done with the existing class and id structure, but apparently I was mistaken -- and I would suggest adding the <span> class and id to the menu(s)