›
Before you ask please READ THIS

Replace side Menu overlay Button (icon) with text.

Urban_LearnersUrban_Learners
in Rife Posts: 34
Hi dear team at Apollo

We have a Rife Pro Theme with a vertical menu. The pop up menu is activated only by ann icon button. We wish to change this icon to text on our vertical header and mobile menu.

The only option we can see is for changing the icon. But nowhere to replace with text. Is it possible to advise how we do this?

We want to say ‘Latest News’ and when this is clicked the side menu pops up.

Thank you in advance.

Andy

Comments

  • SurgeonitoSurgeonito
    Posts: 130
    Hi Andy.
    At this point it's impossible to add a text along with icon or instead of an icon.
    We will consider this in the upcoming version though.
    Support, The
  • Urban_LearnersUrban_Learners
    Posts: 34
    Thanks for letting me know. Is it possible to change the pop up text message? I can’t seem to change this on CSS. OR is there a trigger html I could use for a widget instead? Many thanks
  • SurgeonitoSurgeonito
    Posts: 130
    can you please send me a screenshot of what element you want to change?
    If it's on a specific page - please send me also the URL.
    Support, The
  • Urban_LearnersUrban_Learners
    Posts: 34
    Hi

    It is the icon on our vertical header. ideally we can change this to say 'Latest News'
    See attached file - where we have marked the icon. if its not possible, can we at least change the hover text?

    Screenshot 2025-01-10 110317.png
    874 x 1900 - 299K
  • SurgeonitoSurgeonito
    Posts: 130
    Actually you could do a css trick - try this code, and you can tune it up to your needs:
    #header-tools .tool::before {
    display: block;
    content: "Latest News";
    font-size: 10px;
    width: 100px;
    }
    Support, The
  • Urban_LearnersUrban_Learners
    Posts: 34
    Thank you however that wasn't successful. not to worry if its not possible,
  • SurgeonitoSurgeonito
    Posts: 130
    Depend on how and where you placed this code. It worked for me on local dev, so I guess you can use this code to overwrite the default theme styles if you have a developer within your team.
    Support, The
  • Urban_LearnersUrban_Learners
    Posts: 34
    We have managed to add this, however the text breaks over 2 lines and isn't centered. Is there an adjustment we can make to center this please?
    Here is the custom CSS we are using:
    }
    #header-tools .tool::before {
    display: block;
    content: "LATEST NEWS";
    vertical-align: center;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    width: 50px;
    padding-right: 20 !important;
    }
    Screenshot_27-1-2025_94231_www.urbanlearners.org.jpeg
    277 x 1229 - 48K
  • SurgeonitoSurgeonito
    Posts: 130
    You can add this: 
        position: relative;
    left: -8px;
    Support, The
  • Urban_LearnersUrban_Learners
    Posts: 34
    Thank you very much that works well. Much appreciated
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

In this Discussion