diff --git a/lms/templates/navigation-edx.html b/lms/templates/navigation-edx.html
index b905840951..7eabaa1168 100644
--- a/lms/templates/navigation-edx.html
+++ b/lms/templates/navigation-edx.html
@@ -48,7 +48,11 @@ site_status_msg = get_site_status_msg(course_id)
     </h1>
 
     % if course and not disable_courseware_header:
-    <h2 class="course-header"><span class="provider">${course.display_org_with_default | h}:</span> ${course.display_number_with_default | h} ${course.display_name_with_default}</h2>
+    <h2 class="course-header">
+      <span class="provider">${course.display_org_with_default | h}:</span>
+      <span class="course-number">${course.display_number_with_default | h}</span>
+      <span class="course-name">${course.display_name_with_default}</span>
+    </h2>
     % endif
 
     % if user.is_authenticated():
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 48154a5956..c8ff359488 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -49,7 +49,7 @@ site_status_msg = get_site_status_msg(course_id)
 
     % if course:
     <h2 class="course-header"><span class="provider">${course.display_org_with_default | h}:</span>
-      ${course.display_number_with_default | h}
+      <span class="course-number">${course.display_number_with_default | h}</span>
       <%
         display_name = course.display_name_with_default
         if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
@@ -57,7 +57,7 @@ site_status_msg = get_site_status_msg(course_id)
           if ccx:
             display_name = ccx.display_name
       %>
-      ${display_name}</h2>
+      <span class="course-name">${display_name}</span></h2>
     % endif
 
     % if user.is_authenticated():