[wordpressmarcoParticipant]

Dear X-Team, dear forum,

can anyone tell me how to add text like menu or navigation next to the hamburger icon in mobile view?

Thanks in advance,
Marco

[Paul RModerator]

Hi Marco,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[shea cParticipant]

I was able to do what your speaking of with the following code inserted into the custom CSS section of the customizer, this is for ethos stack, so it might not work for you but I think the idea will work if you find the right selectors

.x-btn-navbar, .x-btn-navbar.collapsed:after {
content: ” Click here to show menu”;
}

Let me know if this helps or if you need help finding the selectors for your site. And X theme staff, is this ok? I see you said its not possible, is this solution not correct in some way?

[wordpressmarcoParticipant]

Hi,
thank you two for the quick reply!

Now, I found a selector and tried adding the following to to the child theme’s style.css:

.x-btn-navbar i:after {
content: “Menü”;
font-style: normal;
text-transform: uppercase;
…
}

It works 🙂
Your are great!

@X-Team: please note this as a feature request, as it’s good for usability

[shea cParticipant]

Awesome I’m glad that worked for you, I had to come up that solution when a client insisted there be some kind of indicator of the menu. @xtheme if there is no issue with the way we did this, it would be a good one to offer to people as that is one small thing that is missing.

[wordpressmarcoParticipant]

Just came across, there is already a text next to the icon. But the class “visually-hidden” makes it invisible.

This means our way of hiding and adding it again is not the cleanest way.

[shea cParticipant]

Yea I think I saw that but didnt get it showing, did you figure out how to get it visible, and it is what we where looking for?

[wordpressmarcoParticipant]

I think, as the text “navigation” is part of the html code, you would have to change the theme’s code to edit it. But that might be overwritten by the next update. To edit the class “visually-hidden” may also not be the wisest, as it may be used in different places.
Under these circumstances, I’ll stick to our before and after solution.

[wordpressmarcoParticipant]

If you don’t need to edit the text, maybe this could work for you, as the selector is a little more specific:

.x-navbar-wrap .x-btn-navbar .visually-hidden {
position:relative;
margin-left:5px;
}

[ZeshanMember]

Hi Guys,

Thanks for writing in!

Using the CSS to add text next to the hamburger icon is totally fine. In regards to the hidden “Navigation” text, that is to show search engines that it’s a navigation button while keeping it hidden from the eyes. You can show that text using the custom CSS if you want to.

To @Shae, thank you so much for helping other X users 🙂

Cheers!

[Author]

Posts