correct menu

application-bootstrap_lab/css/style.css

@@ -8973,3 +8973,45 @@ textarea.form-control {
   100% {
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -136px; } }
+/*Menu*/
+ul {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+ul li {
+  list-style: none;
+}
+ul li a {
+  position: relative;
+  display: block;
+  margin: 0 10px;
+  padding: 5px 10px;
+  color: #aaa;
+  font-size: 19px;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: 0.5s;
+  overflow: hidden;
+}
+ul li a::before {
+  content: '';
+  position: absolute;
+  top: calc(50% - 2px);
+  left: -100%;
+  width: 100%;
+  height: 4px;
+  background: #586878;
+  transition: 0.4s;
+}
+ul li a:hover {
+  color: #CCCCCC;
+}
+ul li a:hover::before {
+  animation: animate .5s linear forwards; 
+}
+

application-bootstrap_lab/index.html

@@ -37,15 +37,14 @@
 		      </button>
 	      <div class="collapse navbar-collapse" id="ftco-nav">
 	        <ul class="navbar-nav ml-auto">
-	          <li class="nav-item active"><a href="index.html" class="nav-link">Home</a></li>
-	          <li class="nav-item"><a href="" class="nav-link">About us</a></li>
-	          <li class="nav-item"><a href="" class="nav-link">Log In </a></li>
+	          <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
+	          <li class="nav-item"><a href="#about" class="nav-link">About us</a></li>
+	          <li class="nav-item"><a href="#contacts" class="nav-link">Contacts</a></li>
 	        </ul>
 	      </div>
 		  </div>
 	  </nav>
     <!-- END nav -->
-
     <section class="home-slider owl-carousel img" style="background-image: url(images/bg_1.jpg);">
 	<div class="slider-item" style="background-image: url(images/bg_3.jpg);">
       	<div class="overlay"></div>
@@ -56,7 +55,9 @@
             	<span class="subheading">Welcome</span>
               <h1 class="mb-4">We have many dishes for you.</h1>
               <p class="mb-4 mb-md-5">Log in or register to place an order.</p>
-              <p><a href="#" class="btn btn-primary p-3 px-xl-4 py-xl-3">Log in</a> <a href="#" class="btn btn-white btn-outline-white p-3 px-xl-4 py-xl-3">Sign up</a></p>
+              <p><a href="#" class="btn btn-primary p-3 px-xl-4 py-xl-3">Log in</a> 
+            <a href="#" class="btn btn-white btn-outline-white p-3 px-xl-4 py-xl-3">Sign up</a>
+                </p>
             </div>
 
           </div>
@@ -131,18 +132,12 @@
 	    				</div>
 	    			</div>
 	    		</div>
-	    		<div class="social d-md-flex pl-md-5 p-4 align-items-center">
-	    			<ul class="social-icon">
-              <li class="ftco-animate"><a href="#"><span class="icon-twitter"></span></a></li>
-              <li class="ftco-animate"><a href="#"><span class="icon-facebook"></span></a></li>
-              <li class="ftco-animate"><a href="#"><span class="icon-instagram"></span></a></li>
-            </ul>
-	    		</div>
+	    		
     		</div>
     	</div>
     </section>
 
-    <section class="ftco-about d-md-flex">
+    <section id="about" class="ftco-about d-md-flex">
     	<div class="one-half img" style="background-image: url(images/about.jpg);"></div>
     	<div class="one-half ftco-animate">
         <div class="heading-section ftco-animate ">
@@ -387,18 +382,7 @@
               </div>
             </div>
           </div>
-          <div class="col-lg-2 col-md-6 mb-5 mb-md-5">
-             <div class="ftco-footer-widget mb-4 ml-md-4">
-              <h2 class="ftco-heading-2">Services</h2>
-              <ul class="list-unstyled">
-                <li><a href="#" class="py-2 d-block">Cooked</a></li>
-                <li><a href="#" class="py-2 d-block">Deliver</a></li>
-                <li><a href="#" class="py-2 d-block">Quality Foods</a></li>
-                <li><a href="#" class="py-2 d-block">Mixed</a></li>
-              </ul>
-            </div>
-          </div>
-          <div class="col-lg-3 col-md-6 mb-5 mb-md-5">
+          <div id="contacts" class="col-lg-3 col-md-6 mb-5 mb-md-5">
             <div class="ftco-footer-widget mb-4">
             	<h2 class="ftco-heading-2">Have a Questions?</h2>
             	<div class="block-23 mb-3">
@@ -415,7 +399,7 @@
           <div class="col-md-12 text-center">
 
             <p><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
-  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made by Max Akimov</a>
+  Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made by Max Akimov
 			</p>
           </div>
         </div>