0

I have this code for page, with pure css animated background and navigation menu. It is OK, but if I use website on mobile page I don´t see navigation bar. In "first version" this was responsive menu, but I edited background and navigation bar isn´t working. Can you help me with this problem? Thanks you much!

<span class="navbar-toggle" id="js-navbar-toggle">
         <i class="fa fa-bars"></i>
</span>
<a href=/index.html><img src="https://i.ibb.co/VtLx8my/f19ada7376b147df815f4dc7438317e0-5.png" alt="Webstránka MENU" class=logo width="210" height="100">
 <ul class="main-nav" id="js-menu"></a>
 <li>
   <a href="#" class="nav-links active">Home</a>
 </li>
 <li>
   <a href="#" class="nav-links">News</a>
 </li>
 <li>
   <a href="#" class="nav-links">About</a>
 </li>
 <li>
   <a href="#" class="nav-links">Contact</a>
 </li>
 <li>
   <a href="#" class="nav-links">Archived</a>
 </li>
</ul>
</nav>
<div class="container">
<section class="main">
 
<div class="context">
     <h1>Web MENU</h1>
   <h3>Welcome!</h3>
 </div>


<div class="area" >
         <ul class="circles">
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
         </ul>
 </div > 
<style>
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
 
 *{
     margin: 0px;
     padding: 0px;
 }
 
 body{
     font-family: 'Exo', sans-serif;
 }
 
 
 .context {
     width: 100%;
     position: absolute;
     top:50vh;
     
 }
 
 .context h1{
     text-align: center;
     color: #fff;
     font-size: 50px;
 }
 
 .context p{
     text-align: center;
     color: #fff;
     font-size: px;
 }
 
 .context h3{
     text-align: center;
     color: #fff;
     font-size: 40px;
 }
 
 
 .area{
     background: #4e54c8;  
     background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
     width: 100%;
     height:100vh;
     
    
 }
 
 .circles{
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }
 
 .circles li{
     position: absolute;
     display: block;
     list-style: none;
     width: 20px;
     height: 20px;
     background: rgba(255, 255, 255, 0.2);
     animation: animate 25s linear infinite;
     bottom: -150px;
     
 }
 
 .circles li:nth-child(1){
     left: 25%;
     width: 80px;
     height: 80px;
     animation-delay: 0s;
 }
 
 
 .circles li:nth-child(2){
     left: 10%;
     width: 20px;
     height: 20px;
     animation-delay: 2s;
     animation-duration: 12s;
 }
 
 .circles li:nth-child(3){
     left: 70%;
     width: 20px;
     height: 20px;
     animation-delay: 4s;
 }
 
 .circles li:nth-child(4){
     left: 40%;
     width: 60px;
     height: 60px;
     animation-delay: 0s;
     animation-duration: 18s;
 }
 
 .circles li:nth-child(5){
     left: 65%;
     width: 20px;
     height: 20px;
     animation-delay: 0s;
 }
 
 .circles li:nth-child(6){
     left: 75%;
     width: 110px;
     height: 110px;
     animation-delay: 3s;
 }
 
 .circles li:nth-child(7){
     left: 35%;
     width: 150px;
     height: 150px;
     animation-delay: 7s;
 }
 
 .circles li:nth-child(8){
     left: 50%;
     width: 25px;
     height: 25px;
     animation-delay: 15s;
     animation-duration: 45s;
 }
 
 .circles li:nth-child(9){
     left: 20%;
     width: 15px;
     height: 15px;
     animation-delay: 2s;
     animation-duration: 35s;
 }
 
 .circles li:nth-child(10){
     left: 85%;
     width: 150px;
     height: 150px;
     animation-delay: 0s;
     animation-duration: 11s;
 }
 
 
 
 @keyframes animate {
 
     0%{
         transform: translateY(0) rotate(0deg);
         opacity: 1;
         border-radius: 0;
     }
 
     100%{
         transform: translateY(-1000px) rotate(720deg);
         opacity: 0;
         border-radius: 50%;
        }
    
 }
    
 
      /*General CSS*/
 :root {
   --blue: #007bff;
   --indigo: #6610f2;
   --purple: #6f42c1;
   --pink: #e83e8c;
   --red: #dc3545;
   --orange: #fd7e14;
   --yellow: #ffc107;
   --green: #28a745;
   --teal: #20c997;
   --cyan: #17a2b8;
   --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #007bff;
   --secondary: #6c757d;
   --success: #28a745;
   --info: #17a2b8;
   --warning: #ffc107;
   --danger: #dc3545;
   --light: #f8f9fa;
   --dark: #343a40;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
   --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 }
 *,
 *:before,
 *:after {
   -webkit-box-sizing: border-box !important;
   -moz-box-sizing: border-box !important;
   box-sizing: border-box !important;
   padding: 0;
   margin: 0;
 }
 body {
   width: 100%;
   height: 100%;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 450;
   line-height: 1.5;
   color: #212529;
   text-align: left;
   margin: 0px auto;
 }
 html {
   position: relative;
   min-height: 100%;
   width: 100%;
   overflow-x: hidden;
 }
 .navbar {
   font-size: 18px;
   background-image: linear-gradient(260deg, blue 0%, lightblue 100%);
   border: 1px solid rgba(0, 0, 0, 0.2);
   position: fixed;
   top:0;
   left:0;
   right:0;
   z-index:1000;
   margin: 0px auto;
 }
 
 .main-nav {
   list-style-type: none;
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 .main-nav li{
   
 }
 .nav-links{
   padding: 14px 16px;
   display:block;
 }
 .nav-links,
 .logo {
   text-decoration: none;
   color: rgba(255, 255, 255, 0.7);
 }
 .nav-links:hover,
 .nav-links:focus
 .nav-links .active,
 .logo:hover,
 .logo:focus{
   background: darkblue;
 }
 
 .main-nav li {
   text-align: left;
   justify-self:flex-end;
   align-self: flex-end;
 }
 
 .logo {
   padding: 15px 16px 14px;
 }
 .navbar-toggle {
   align-self:flex-end !important;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.8);
   font-size: 24px;
   margin-right: 5%;
   float: right;
   padding: 1.5px 16px;
 }
 .main-nav {
   list-style-type: none;
   display: none;
 }
 .active {
   display: block;
 }
 @media screen and (min-width: 768px) {
   .navbar .main-nav{
     display: flex;
     padding-bottom: 0;
     flex-direction: row;
     justify-content: flex-end;
   }
   .main-nav li{
     justify-self:flex-end;
     align-self: flex-end;
   }
 
   .nav-links {
     display: inline-block;
   }
 
   .logo {
     float: left;
     padding: 15px 16px;
   }
 
   .navbar-toggle {
     display: none;
   }
 
   .logo:hover,
   .nav-links:hover {
     color: rgba(255, 255, 255, 1);
   }
 }
 .container:nth-of-type(1) {
   /*padding-top: 60px !important;*/
 }
 .container {
   min-width: 100%;
   display: block;
   padding: 0;
   /*margin: 0px auto 20px;*/
   position: relative;
 }
 .table {
   table-layout: auto;
   padding: 0.5%;
   border-collapse: collapse;
   min-width: 100%;
 }
 .table td,
 .table th {
   border: solid #ededed;
   padding: 0.5% 1%;
 }
 th {
   text-align: center;
 }
 tbody tr:nth-of-type(2n + 1) {
   background: #eeeeee;
 }
 .main h1{
   background: url('http://www.gregswebdesignkc.com/AICGP/assets/images/bldg1.jpg') no-repeat fixed center/100%;
   text-align: center;
   padding: 4%;
   color: #fff;
   margin: 0px -1%;
 }
 
 .section-1 h1{
   background: url('http://www.gregswebdesignkc.com/AICGP/assets/images/bldg1.jpg') no-repeat fixed center/100%;
   text-align: center;
   padding: 4%;
   color: #fff;
   margin: 0px -1%;
 }
 .panel{
   margin-bottom: 1.5%
 }
 .panel p{
   padding:2% 1%;
   text-align:center;
   background-color: #eeeeee;
   margin-top: 1%;
   border-radius: 14px;
   border: #777 solid 4px;
 }
 
 .lead{
   font-size: x-large
 }
 
 section{
   margin-top:.5%;
   /*margin-bottom: .5%;*/
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6{
     margin: 10px 0 10px;
     text-transform: uppercase;
     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
     font-weight: 800;
     letter-spacing: 1px;
   text-align: center;
 }
 
 section{
     /*padding-bottom:5%;*/
 }
 
 .row{
     position:relative;
 }
 
 .row:first-child{
     position: relative;
     margin-top:80px !important;
 }
 hr{
   margin: 2% 35%;
   color:#ededed;
 }
 .section-split{
   width: 100%;
   float: left;
   margin-top: 2%;
   margin-bottom: 2%;
   font-size: 17.5px;
   page-break-inside: avoid;
   border: 3px solid #fff;
   -webkit-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
   -mox-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
   -ms-box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
   box-shadow: inset 5px 0px 0px 0px #873939, 8px 8px 8px 2px #888;
   padding: 1% 2%;
   border-left: none;
   margin-left: 1%;
   margin-right: 1%;
 }
 
 
 /* BS4 CSS that seems not to work */
 
 .float-xs-left {
     float: left!important
 }
 
 .float-xs-right {
     float: right!important
 }
 
 .float-xs-none {
     float: none!important
 }
 
 @media (min-width:576px) {
     .float-sm-left {
         float: left!important
     }
     .float-sm-right {
         float: right!important
     }
     .float-sm-none {
         float: none!important
     }
 }
 
 @media (min-width:768px) {
     .section-split{
       width: 45% !important;
     }
     .float-md-left {
         float: left!important
     }
     .float-md-right {
         float: right!important
     }
     .float-md-none {
         float: none!important
     }
 }
 
 @media (min-width:992px) {
     .float-lg-left {
         float: left!important
     }
     .float-lg-right {
         float: right!important
     }
     .float-lg-none {
         float: none!important
     }
 }
 
 @media (min-width:1200px) {
     .float-xl-left {
         float: left!important
     }
     .float-xl-right {
         float: right!important
     }
     .float-xl-none {
         float: none!important
     }
 }
 
 @-ms-viewport {
   width: device-width;
 }<style>
Adam
  • 67
  • 9

1 Answers1

0

When I click the menu bar in the console I get this error: Refused to display 'https://cdpn.io/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. And found this links: https://stackoverflow.com/questions/20498831/refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin && https://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options#answer-7469997. Maybe this can help to you solve the issue

Rabbi Musayev
  • 143
  • 1
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 09 '21 at 21:38