Nástřel mobilní verze.

mamweb/static/css/mamweb.css

@@ -71,8 +71,8 @@ h2 {
 
 #header img.logo {
 	position: absolute;
-	top: 20px;
-	left: 45px;
+	top: 40px;
+	left: 55px;
 }
 #header h1 {
 	font-size: 130%;
@@ -90,18 +90,24 @@ h2 {
 
 /* Menu */
 
-#menu {
+div.menu.mobile {
+	display: none;
+}
+div.menu.desktop {
+	display: block;
+}
+div.menu {
 	position: relative;
 	top: -10px;
 	z-index: 10;
 	background: url("../images/menu-bg.png") no-repeat left top;
 	height: 60px;
 }
-#menu ul {
+div.menu ul {
 	padding: 0px;
 	margin: 0px;
 }
-#menu li {
+div.menu li {
 	display: inline-block;
 	border-radius: 0px;
 	
@@ -116,19 +122,19 @@ h2 {
 	border-bottom-left-radius: 8px;
 	border-bottom-right-radius: 8px;
 }
-#menu a {
+div.menu a {
 	display: block;
 	padding: 8px 10px;
 	color: #006400;
 	height: 48px;
 }
-#menu a:hover {
+div.menu a:hover {
 	background: url("../images/menu-bg-selected.png") no-repeat left -7px;
 	background-size: 100% 68px;
 	text-decoration: none;
 	color: #003c00;
 }
-#menu li.selected a {
+div.menu li.selected a {
 	background: url("../images/menu-bg-selected.png") no-repeat left -7px;
 	background-size: 100% 68px;
 	text-decoration: none;
@@ -234,11 +240,11 @@ div.zadani_azad_termin {
 		background-size: 100% 100%;
 	}
 	#header img.logo {
-		top: 15px;
-		left: 25px;
-		height: 170px;
+		top: 27px;
+		left: 35px;
+		height: 140px;
 	}
-	#menu li {
+	div.menu li {
 		min-width: 120px;
 		font-size: 130%;
 	}
@@ -274,3 +280,81 @@ div.zadani_azad_termin {
 		float: left;
 	}
 }
+
+@media (max-width: 767px) {
+	#header {
+		width: 100%;
+		height: 196px;
+		height: 0px;
+		background-size: 100%;
+		padding-bottom: 25%;
+	}
+	#header img.logo {
+		top: 0px;
+		left: 0px;
+		height: 100%;
+	}
+	div.menu {
+		height: auto;
+	}
+	div.menu li {
+		display: block;
+		width: 100%;
+		height: 35px;
+		font-size: 130%;
+	}
+	#submenu {
+		background: none;
+		height: auto;
+		margin-left: 90px;
+		margin-top: 15px;
+	}
+	#submenu ul {
+		font-size: 110%;
+	}
+	#submenu li {
+		display: inline-block;
+		margin: 5px 8px;
+		border-radius: 30px;
+		background: #ffd546;
+		height: auto;
+	}
+	#submenu li a:hover, #submenu li.selected {
+		background: #ffd546;
+	}
+	div.menu.mobile {
+		display: block;
+		position: absolute;
+		top: -1px;
+		background: none;
+	}
+	div.menu.mobile > div.dropdown > button {
+		font-size: 20px;
+	}
+	div.menu.mobile > div.dropdown > ul {
+		margin: 0px;
+		padding: 0px;
+		border-radius: 0px;
+	}
+	div.menu.mobile > div.dropdown > ul > li {
+		margin: 0px;
+		padding: 0px;
+		display: block;
+		font-size: 20px;
+		background: none;
+		font-variant: normal;
+		height: auto;
+	}
+	div.menu.mobile > div.dropdown > ul > li > a {
+		margin: 0px;
+		padding: 5px 30px;
+		height: auto;
+	}
+	div.menu.mobile > div.dropdown > ul > li > a:hover {
+		background: #ffa500;
+	}
+
+	div.menu.desktop {
+		display: none;
+	}
+}

mamweb/templates/base.html

@@ -56,9 +56,24 @@
         </div>
       </div>
       <div class='row'>
-	    <div class='col-md-12' style=''>
-	      <div id='menu'>
+	    <div class='col-md-12'>
+          {# ========= MOBILE MENU ========== #}
+		  <div class="menu mobile">
+		   	<div class="dropdown">
+  			  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
+			  <span class="glyphicon glyphicon-th-list"></span></button>
+  			  <ul class="dropdown-menu">
+                <li class=""><a href="/co-je-MaM/uvod/">Co je M&amp;M</a>
+                <li class=""><a href="/soustredeni/">Soustředění</a>
+                <li class=""><a href="/zadani/aktualni/">Zadání</a>
+                <li class=""><a href="/clanky/uvod/">Články</a>
+                <li class=""><a href="/archiv/cisla/">Archiv</a>
+                <li class=""><a href="/co-je-MaM/kontakt/">Kontakt</a>
+  			  </ul>
+			</div>
+	      </div>
           {# ============= MENU ============== #}
+	      <div class="menu desktop">
           <ul>
             <li class="{% block menu_uvod %}{% endblock %}"><a href="/co-je-MaM/uvod/">Co je M&amp;M</a>
             {# ukazka jak pouzit tag url <li class="{% block menu_soustredeni %}{% endblock %}"><a href="{% url 'seminar_seznam_soustredeni' %}">Soustředění</a> #}
@@ -68,8 +83,8 @@
             <li class="{% block menu_archiv %}{% endblock %}"><a href="/archiv/cisla/">Archiv</a>
             <li class="{% block menu_odevzdat %}{% endblock %}"><a href="/co-je-MaM/kontakt/">Kontakt</a>
           </ul>
-          {# ======== KONEC MENU =============#}
 	      </div>
+          {# ======== KONEC MENU =============#}
 	    </div>
 	  </div>
 	  <div class='row'>

seminar/templates/seminar/titulnistrana.html

@@ -2,7 +2,8 @@
 
 
 {% block content %}
-
+<br />
+<br />
   {# Uvitaci text #}
   <h2>
     {% block nadpis1a %}{% block nadpis1b %}