Forum Discussion

mattied's avatar
mattied
Community Member
5 months ago

Black Transition Bar Across Top of Screen

Hello! Any tips on how to edit this text? It's the black transition box that comes across the top of the screen after you move to a new lesson. I can't seem to find an area with Rise360. I'v...
rise 360
PhilFoss's avatar
PhilFoss
Community Member
5 months ago

mattied​ I ran into the same issue, and thought I'd share a solution. As a web designer, I can't tell my stakeholders "our software can't do that" as there is always a solution. A Rise course is just a website, after all.

CSS used in the video:
*note these lesson links reference urls/links that will be different for everybody!

#app a.lesson-nav-link__link[href="#/lessons/F27LI_LJSed2d7gGcFnrbjYrWUZxGeZY"] span {
  font-size: 0;
}
#app a.lesson-nav-link__link[href="#/lessons/F27LI_LJSed2d7gGcFnrbjYrWUZxGeZY"] span::before {
  content: "Introduction";
  font-size: 16px;
}

Doing some debugging, Rise calls this element 'lesson navigation' but I like 'transition bar' as it's much more descriptive, however you can change the style to more of a floating button than a full width bar in theme settings.