I'm trying to color the bootstrap menu ... I found a beautiful animation, I use it and the animation starts to go outside the screen. If you put an absolute positioning, then you need to manually set the height, and this kills responsiveness, and if you set the height and width of the parent, then it leaves the screen

.bg { animation:slide 3s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%); opacity:.5; position: absolute; height: 100%; right:-50%; left:-50%; } .bg2 { animation-direction:alternate-reverse; animation-duration:4s; } .bg3 { animation-duration:5s; } @keyframes slide { 0% { transform:translateX(-25%); } 100% { transform:translateX(25%); } } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand navbar-light bg-light"> <div class="bg"></div> <div class="bg bg2"></div> <div class="bg bg3"></div> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav>

    2 answers 2

    Add to CSS:

     .navbar {overflow:hidden;}

    But keep in mind that this will not work drop-down menus, if you have them in the future.

    UPD: working version, where everything will be ok. Please note that the .navbar class has removed .bg-light

     .animation { position: absolute; height: 100%; top:0; bottom: 0; left:0; right: 0; z-index: -1; overflow: hidden; } .navbar { position: relative; } .bg { animation:slide 3s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%); opacity:.5; position: absolute; height: 100%; right:-50%; left:-50%; } .bg2 { animation-direction:alternate-reverse; animation-duration:4s; } .bg3 { animation-duration:5s; } @keyframes slide { 0% { transform:translateX(-25%); } 100% { transform:translateX(25%); } } 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <nav class="navbar navbar-expand navbar-light"> <div class="animation"> <div class="bg"></div> <div class="bg bg2"></div> <div class="bg bg3"></div> </div> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav>

    • And how to return to the work drop down menu? - Alexey
    • Wrap the animated background in a separate container and play around with the position. Completed the answer. - Talleyran

    Add

     nav { overflow-x: hidden; }
    • And how to return to the work drop down menu? - Alexey
    • @ Alexey, how do you click on the usual links? They become inactive ... - shidow