diff --git a/_includes/nav.html b/_includes/nav.html
index a1adfbc254c1..4a95b95d6e82 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -16,7 +16,7 @@
         {%- if link[1].first %}
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ link[0] }}</a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
               {%- for childlink in link[1] -%}
                 {%- for linkparts in childlink %}
                   <a class="dropdown-item" href="{{ linkparts[1] | relative_url }}">{{ linkparts[0] }}</a>
diff --git a/assets/css/beautifuljekyll.css b/assets/css/beautifuljekyll.css
index 4faabc1b8b3c..a72135eeeb9a 100644
--- a/assets/css/beautifuljekyll.css
+++ b/assets/css/beautifuljekyll.css
@@ -247,20 +247,17 @@ img {
 }
 
 .navbar-custom .nav-item.dropdown .dropdown-menu {
-  min-width: 0;
   margin-top: 0;
   font-size: 1em;
   border: 0;
+  min-width: 100%;
   padding: 0;
-  width: 100%;
-  word-break: break-word;
 }
+
 .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item {
-  white-space: normal;
   padding: 0.625rem;
   background-color: {{ site.navbar-col | default: "#EAEAEA" }};
   text-decoration: none !important;
-  border-width: 0 1px 1px 1px;
   font-weight: normal;
   color: {{ site.navbar-text-col | default: "#404040" }};
 }
@@ -275,6 +272,10 @@ img {
     border: 1px solid {{ site.navbar-border-col | default: "#DDDDDD" }};
     border-width: 0 1px 1px;
   }
+
+  .navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item:first-child {
+    border-top-width: 1px;
+  }
 }
 
 @media (max-width: 1199px) {