Hi all -
We are hoping to remove the horizontal course navigation bar at the bottom for a course. I am wondering if anyone has done this, and if so, what the CSS is for it? Thanks!
I would love to know this too! We are brand new to Ethos and we don’t have any highly complex courses right now so had also wondered about removing that bar.
Hi Julie,
We tried to hide it, but it cannot be done through CSS without losing functionality.
It serves as the place where the continue button goes when you finish a section and are ready to move on to the next. You can hide it with one line of css, but it would take away the button needed to progress forward when that button does appear.
Ethos would have to do this change in the product itself. I would love to know if anyone else is interested in this so we can have a stronger enhancement request 
Thanks,
Natalie
That’s exactly what we want - we want to remove the forward/back buttons on the course and only have people be able to progress forward/back by clicking on the objects in the Course Progress bar. I’d love that line of code! Thanks! JAM
1 Like
Hi Jam,
I used this a lot in our larger courses where we don’t want the user to get kicked off a child-level course and have to roam back to the parent.
After all the course objects within a child, the last one is a Course Page with the custom course menu we create (It’s just linked buttons that aim the learner to the other child-level courses within the parent). Each child course references the same course page at the end. This means when the user finishes all the required objects for credit, they will get to this page instead of a confirmation page and will not be able to advance to the confirmation page.
The code added to the page is as follows:
<style type="text/css">/* Additional CSS CODE */
#title-container {display:none;} /*Hide pg title*/
.region-course-sidebar {display:none;} /*Remove Course Outline*/
#main-content, #content {width: 100%!important;} /*Widens page content*/
.course-flow-body-title {display:none;} /* Hides Course Content Title*/
#region-course-bottom {display:none;} /* Hides Course Navigation*/
</style>
The code above removes the nav bar at the bottom AND the outline on the left. I also remove the title because I think it looks cleaner, but that’s not necessary.
Thanks for sharing. This is a little more than we need… I simply want the bottom horizontal nav bar with buttons that appear within it to be hidden, so that people must use the course progress bar on the left to advance to the next object. I would be adding this code to the general site configuration page > global CSS code, and reference the course node (.page-node-<node#>) I’ve tried figuring it out from “view source” of the course, which is what I usually do, but can’t figure out this one. Anyone have a line or two that’ll do it?
You can. Just use this line:
#region-course-bottom {display:none;}
That will ensure the horizontal bar at the bottom no longer shows. Gmartin was just giving you everything they use.
Tried that right away and it didn’t work so I thought I must be doing something wrong. Hmmm… I’ll check to make sure I didn’t mistype it.
Interesting. Here is a screen shot from our global code to include where I took out the bottom navigation tool. I just grouped it with the rest of the code with that configuration and no issues on my end.
Hi Everyone!
I would love to gather some additional information about what would be the most ideal course navigation experience for your learners. I am very interested in hearing about all of your different use cases. Feel free to continue this thread or send me a message directly to set up a call: Scott.kuchinski@gocadmium.com
Have a wonderful Holiday weekend!
Happy Friday Sir!
We haven’t explored CSS to remove navigation buttons, but thank you for inquiring about the navigation experience as a whole. One thing that we have trouble with is with the “Activity Complete” button that automatically appears if the learner is sent to a course that does have course objects, let’s say an Evaluation, but it is not required for credit.
We usually have to be explicit in our instructions, for ex:
Click on the “Activity Complete” button below to access the Evaluation. Once on the next page, please click on the “DATE | Activity Evaluation” link to complete it.
Please Note* : Last day to access and complete the Evaluation is: TIME on DAY, DATE**
it would be nice if “Activity Complete” was not the first thing they see, when the option to complete course objects is still there.
thank you
Mayra Aguirre
Hi Jam, I hope you were able to get it to work. I did add extra to the code I provided, but each line has a comment at the end explaining the use for that line of code, anything you do not need can be removed by deleting that specific line.
The code you would need to use should be added at the top of the text within the page, and should be entered like so:
<style type="text/css">/* Additional CSS CODE */
#region-course-bottom {display:none;} /* Hides Course Navigation*/
</style>
This should be able to remove just the navigation bar at the bottom of the page.
Unless you want the nav bar to be removed for ALL course objects, I would not recommend adding it to the Global CSS code. Alternatively, you can target it to just one node within the Global CSS code, but I find that more tedious.
Hi Scott!
I use this work around in our courses because we find it too confusing for some of our learners when navigating a multi-level course. By removing the navigation bar at the bottom we force them to stop in the “Course Landing” page we create for them. Each button within that landing page is then hyperlinked to the start of each child course by using the link “[sire:url]/node/###/takecourse”. This essentially replaces the take course button and gets them started immediately. Otherwise, we find it to be too many clicks.
Also, for some courses, we have hidden the “Take Course” button from the registration page, specially if it is a child course within a larger course, and we want the learner to start from a defined starting point. In that case we’re added our own “Launch Activity” button and linked it to the starting point we’ve defined. This is only doable when we’ve made registration possible via parallel enrollment (Enrollment is required in X course to be able to access Y course). We would prefer to make it via store purchase, but unfortunately we can’t tie a “payment” object within a course to multiple products or allow for a product to have multiple attributes selected.
That’s how I’ve done it in the past - I just reference the course node to mess with that single course in the global CSS. Usually I’m hiding things on the external course information pages (before you click begin). This is the first time I am trying to hide things within the course.
I was able to add the code to the global CSS ( #region-course-bottom {display:none;} ) to remove the nav bar from ALL courses, but I haven’t discussed this with the team, so until then, I’d like to do it just for this course node. I thought it would be as simple as adding .page-node-<node#> #region-course-bottom {display:none;} but that’s not working??
I haven’t done this by applying it to an entire course, only by adding it to individual course elements. I have added the code at the beginning of each WYSIWYG editor of the following elements
- The course instructions (added within the instruction panel in the course “edit” tab)
- Course Pages (added before the course page content)
- Waprwire elements (added within the Warpwire video instructions panel)
I would assume you could add it to surveys as well by adding it to either the webform description panel or by adding a markup element at the beginning of the form. You would probably also have to add a separate one to the confirmation page (although I haven’t tested this)
This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.