diff --git a/css/custom.css b/css/custom.css
index 75d4025..8fbdcf4 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -29,12 +29,33 @@
     top: 0;
     left: 80px;
 }
+@media screen and (max-width: 768px) {
+    #navbar-2nd-logo img {
+        top: -8px
+    }
+    .row.navbar.navbar-default > div.logo-menu-line {
+        height: 70px;
+    }
+}
+@media screen and (min-width: 768px) and (max-width: 1084px) {
+    #fh5co-header .navbar-brand {
+        font-size: 1em;
+    }
+}
 
 .navbar-fixed-top .navbar-brand {
     white-space: nowrap;
     margin-left: -30px;
 }
 
+.js-fh5co-nav-toggle.fh5co-nav-toggle {
+    margin-right: 20px;
+}
+/* @media screen and (max-width: 768px) {
+    .navbar-collapse.collapse ul li {
+        text-align: center;
+    }
+} */
 .navbar-fixed-top .navbar-brand img {
     filter: invert(50%)
 }
diff --git a/index.html b/index.html
index 6194006..9ebd876 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
 	<header role="banner" id="fh5co-header">
 			<div class="container">
 				<div class="row navbar navbar-default">
-		        <div class="col-md-3 col-xs-12">
+		        <div class="col-md-3 col-xs-12 logo-menu-line">
 		        	<!-- Mobile Toggle Menu Button -->
 					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
 		         <a class="navbar-brand" href="index.html"><img src="images/logo-white.png" alt="the simplewebconf logo">SimpleWebConf</a>