main nav break points

diff --git a/styles.css b/styles.css
index 028756a..fb78322 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,14 @@
+/* #nav {
+    background: #065892;
+    display: inline-block;
+    border-radius: 5px;
+    }
+#nav li {
+    float: left;
+    }
+#nav li a {
+    color: white;
+    } */
 body {
     background: url(assets/bg.jpg) 0 -1350px fixed;
     }
@@ -71,7 +82,7 @@ body {
 #nav .top-bar-section ul li a:hover {
     color: #fffb02 !important;
     }
-@media only screen and (max-width: 64.063em) {
+@media only screen and (max-width: 58.063em) {
     #nav {
         display: block;
         width: 100%;
@@ -82,6 +93,23 @@ body {
         display: none;
         }
     }
+/* main nav font size */
+@media only screen and (max-width: 52.063em) {
+    .top-bar-section ul li a {
+        font-size: .9rem;
+        }
+    }
+@media only screen and (max-width: 50.063em) {
+    .top-bar-section ul li a {
+        font-size: .8rem;
+        }
+    }
+@media only screen and (max-width: 45.063em) {
+    .top-bar-section ul li a {
+        font-size: .7rem;
+        }
+    }
+
 /* Social Media icons */
 #sm li {
     width: 41px;
@@ -97,7 +125,7 @@ body {
 #sm li:last-child a {
     background: url(assets/iYT.png);
     }
-@media only screen and (max-width: 64.063em) {
+@media only screen and (max-width: 58.063em) {
     #sm {
         position: absolute;
         right: 20px;

diff --git a/templates/template.html b/templates/template.html
index d916348..b36a6a7 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -56,6 +56,23 @@
             </div>
                 <div class="row">
                     <div class="large-12 columns">
+                        <!-- <ul id="nav" class="reset-list">
+                            <li>
+                                <a href="#">Home</a>
+                            </li>
+                            <li>
+                                <a href="#">Tours &amp; Cruises</a>
+                            </li>
+                            <li>
+                                <a href="#">Tickets, Packages &amp; Coupons</a>
+                            </li>
+                            <li>
+                                <a href="#">Groups &amp; School Rates</a>
+                            </li>
+                            <li>
+                                <a href="#">About</a>
+                            </li>
+                        </ul>-->
                         <nav class="top-bar" data-topbar>
                             <section class="top-bar-section">
                                 <ul class="right" id="sm">