Parcourir la source

Initial mobile nav. Will need to use navbar-nav not pills. Work on #9.

Edd Baldry il y a 8 ans
Parent
commit
a37d9e8ad6

+ 5 - 0
bakerydemo/static/css/main.css

@@ -491,3 +491,8 @@ li.has-submenu a.allow-toggle {
   content: "\00BB";
 }
 
+/* Mobile nav */
+.navbar-toggle .icon-bar {
+  background-color: #fff;
+}
+

+ 0 - 5
bakerydemo/static/css/main2.css

@@ -1,5 +0,0 @@
-.hero{
-	height: 600px;
-	background-size: cover;
-	background-position: center;
-}

+ 0 - 3
bakerydemo/templates/includes/head.html

@@ -31,10 +31,7 @@
     <link href="https://fonts.googleapis.com/css?family=Alegreya:400,700|Lato:300,400,700,900" rel="stylesheet">
 
     <!-- Theme CSS -->
-    {# <link href="css/clean-blog.min.css" rel="stylesheet">#}
     <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/main2.css' %}">
-
 
     <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

+ 7 - 1
bakerydemo/templates/includes/header.html

@@ -4,6 +4,12 @@
     <div class="row">
       <div class="col-lg-12">
         <a href="#" class="logo">The Wagtail Bakery</a>
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navigation" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
         <form action="/search" method="get" class="search" _lpchecked="1">
           <input name="q" type="text" placeholder="Search the site" id="" aria-label="Search the site" autocomplete="off">
           <a href="#" class="search-icon">
@@ -12,7 +18,7 @@
         </form>
         
         {% block main_navigation %}
-          <nav>
+          <nav class="collapse navbar-collapse" id="main-navigation">
             <ul class="nav nav-pills">
               {% get_site_root as site_root %}
               {% top_menu parent=site_root calling_page=self %}