Stop pixel shift on hover in main navigation nav-pills

bakerydemo/static/css/main.css

@@ -240,13 +240,38 @@ nav {
     font-size: 14px;
   }
 }
-
+.nav-pills>li>a, .nav-pills>li>a:focus, .nav-pills>li>a:hover,
+.nav-pills>li, .nav-pills>li, .nav>li>a, .nav>li>a {
+  border-top: 1px solid transparent;
+}
+/* The following is to stop a pixel shift on hover */ 
+.nav-pills>li.breads {
+  width: 90px;
+}
+.nav-pills>li.locations {
+  width: 140px;
+}
+.nav-pills>li.blog {
+  width: 86px;
+}
+.nav-pills>li.gallery {
+  width: 115px;
+}
+.nav-pills>li.gallery {
+  width: 115px;
+}
+.nav-pills>li.contactus {
+  width: 148px;
+}
+.nav-pills>li.about {
+  width: 98px;
+}
 .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover,
 .nav-pills>li.active, .nav-pills>li:hover, .nav>li>a:focus, .nav>li>a:hover {
   color: #d4566b;
   background-color: transparent;
   border-top: 1px solid #d4566b;
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {

bakerydemo/templates/tags/top_menu.html

@@ -2,7 +2,7 @@
 {% get_site_root as site_root %}
 
 {% for menuitem in menuitems %}
-  <li class="presentation {% if menuitem.show_dropdown %}has-submenu{% endif %} {% if menuitem.active %}active{% endif %}">
+  <li class="presentation {{ menuitem.title|lower|cut:" " }}{% if menuitem.active %} active{% endif %}{% if menuitem.show_dropdown %} has-submenu{% endif %}">
       {% if menuitem.show_dropdown %}
           <a href="{% pageurl menuitem %}" class="allow-toggle">{{ menuitem.title }} <span><a class="caret-custom dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a></span></a>
               {% top_menu_children parent=menuitem %}