How to make Oblique lines with CSS / Bootstrap 3 - html

How can I make a page like this with slanted lines?
Can I put an angle of 20 degrees for example? I have to put 3 div?
For now I put a first div to put a logo in the middle, then I put the navigation bar and I would like the navigation bar to be aligned with the angle just above the oblique line.
I have to work on bootstrap 3
I'm a bit lost. thank you very much for your help and explanations
<div class="container" style="background-color: #04342E; width:100%">
<img class="img-responsive center-block" style="height: 600px; align-items: center;"; src="/i/gp-logo.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div>
</div>
</div>

Either you can create div with clip-path I would recommand to use: https://bennettfeely.com/clippy/
Either you use background with linear-gradient.
DEMO with clip-path:
body{
background: #04342E;
margin:0;
}
div.polygon{
height: 100vh;
width: 100vw;
background: white;
clip-path: polygon(0 25%, 100% 0, 100% 100%, 0 75%);
display:flex;
}
.content{
height: 50%;
width: 100%;
background-color:rgba(255,0,0,0.3); /** Just used to show the written area But it should be removed **/
margin:auto;
}
<div class="polygon">
<div class="content">
Lorem ipsum
</div>
</div>

.container {
background-color: #04342E;
width: 100%;
height: 500px;
position: relative;
}
.container::after {
position: absolute;
content: "";
left: 0px;
right: 0px;
bottom: 0px;
border-bottom: solid white 500px;
transform-origin: bottom right;
transform: skew(1000deg);
}
.container #content {
background-color: #04342E;
width: 100%;
height: 500px;
margin-top: 600px;
position: relative;
}
.container #content::after {
position: absolute;
content: "";
top: 0px;
right: 0px;
left: 0px;
border-top: solid white 500px;
transform-origin: top left;
transform: skew(-1000deg);
}
<div class="container">
<img class="img-responsive center-block" style="height: 100px; align-items: center;" ; src="./images/image 5.png" />
<nav class="navbar navbar-default" style="justify-content: space-between; background-color: transparent; background: transparent; border-color: transparent;">
<ul class="nav navbar-nav" style="text-decoration: none">
<li class="nav-item">
<a class="nav-link active" href="#" style="color: white;">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Tableaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Papeterie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: white;">Contact</a>
</li>
</ul>
</nav>
<div id="content">
</div>
</div>
you can use psuedo classes in css to create this. see above for the code.

Related

My Navbar links are showing up under my navbar

I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

Bootstrap nav-bar not displaying content outside its width

#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active {
position: relative;
}
.nav-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before,
.navbar::after {
height: 6px;
width: 3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom: -6px;
background: #14fe17;
}
.navbar::before {
left: 0px
}
.navbar::after {
right: 0px;
}
.navbar-nav {
width: 100%;
}
body {
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem;
}
body::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
z-index: 100000000;
pointer-events: none;
}
h2 {
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img {
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav>li.nav-item>a.nav-link,
ul.nav>li.nav-item>a.nav-link,
div.tab-content {
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<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="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class="center-image">
<img src="vb.png">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
#font-face{
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar{
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active{
position: relative;
}
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before, .navbar::after{
height:6px;
width:3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom:-6px;
background: #14fe17;
}
.navbar::before{
left:0px
}
.navbar::after{
right:0px;
}
.navbar-nav{
width: 100%;
}
body{
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem ;
}
body::after{
width: 100%;
height:100%;
content: "";
position: absolute;
top:0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px );
z-index: 100000000;
pointer-events:none;
}
h2{
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img{
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav > li.nav-item > a.nav-link ,
ul.nav > li.nav-item > a.nav-link, div.tab-content{
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<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="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class= "container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
STATUS
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class= "center-image">
<img src="vb.png">
</div>
</body>
<script src= "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "js/main.js"></script>
</html>
I am trying to design my personal web-page with a Fallout 4 pipboy style. I am running into an error whereby I want to edit the lines on the ::before and ::after under the navbar to look more like a pipboy. The red you see on the picture is me trying to debug why the nav-item activebegins midway through the first item (Home) and extends all the way to the end of the page. Shouldn't it be just the length of the active item? I have posted my code regarding this issue below.
Any advice is appreciated!
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<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="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>

Unordered-list inline vertical alignment and responsive spacing

I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}

Dropdown menu disappears when I try to hover it

I'm trying build a dropdown menu con HTML and CSS, but the problem is that when I hover on the menu item that contains the sub-menu, this one appears, but when I try to hover it, it disappears.
Here's the code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
}
header {
height: 120px;
background: #353638;
width: 100%;
z-index: 1;
}
#c-header {
width: 60%;
margin: 0 auto;
height: 100%;
}
#logo {
float: left;
width: 76px;
height: 35px;
margin: 40px;
}
#logo img {
display: block;
height: 100%;
width: 100%;
}
nav {
float: right;
margin: 15px;
line-height: 70px;
}
.nav-item {
list-style-type: none;
float: left;
font-family: 'Lato', sans-serif;
font-weight: bold;
height: 90px;
display: block;
position: relative;
z-index: 1;
}
.nav-item > a {
text-decoration: none;
color: white;
display: block;
height: 100%;
line-height: 90px;
padding: 0 15px 0 15px;
transition: background .5s ease;
}
.nav-item a:hover {
background: #337ab7;
}
.nav-item .sub-menu {
background: #337ab7;
position: absolute;
width: 250px;
display: none;
z-index: 9999;
}
.sub-menu ul {
overflow: hidden;
list-style-type: none;
padding: 10px;
}
.sub-menu-item {
height: 40px;
}
.sub-menu-item a {
text-decoration: none;
color: white;
display: block;
line-height: 32px;
padding: 4px 0 4px 20px;
transition: background .3s ease;
}
.sub-menu-item a:hover {
background: #333;
}
.nav-item a:hover ~ .sub-menu {
display: block;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sima</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.css">
<script src="js/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<header>
<div id="c-header">
<a href="#" id="logo">
<img src="img/logo.png" alt="sima_logo">
</a>
<nav id="menu">
<ul>
<li class="nav-item">
Home
</li>
<li class="nav-item">
<a href="#" id="oap">Our Another Page
<i class="fa fa-angle-down" aria-hidden="true"></i>
</a>
<div class="sub-menu">
<ul id="oap-sub-menu">
<li class="sub-menu-item">Our Team
</li>
<li class="sub-menu-item">Our Testimonial
</li>
<li class="sub-menu-item">Our Latest Blog
</li>
<li class="sub-menu-item">Our Pricing
</li>
<li class="sub-menu-item">Our Happy Client
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#" id="sp">Stick Page
<i class="fa fa-angle-down"></i>
</a>
<div class="sub-menu">
<ul id="sp-sub-menu">
<li class="sub-menu-item">Blog Page
</li>
<li class="sub-menu-item">Single Blog Page
</li>
</ul>
</div>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Our Skill
</li>
<li class="nav-item">
Our Service
</li>
<li class="nav-item">
Our Portfolio
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<script src="js/script.js"></script>
</body>
</html>
You problem is that once you move your mouse from .nav-item a to the .sub-menu, the .nav-item a is no hovered so this select .nav-item a:hover ~ .sub-menu is not valid.
You can fix this by:
.nav-item a:hover ~ .sub-menu, .sub-menu:hover {
display: block;
z-index: 9999;
}
Here is a codepen:
http://codepen.io/anon/pen/xEGbYa
This will make sure the .sub-menu will stay block while you hover it as well.
The problem now is that you got a new issue - once you move your mouse from the top menu (.nav-item a) to the sub menu (.sub-menu) - your top menu is not longer with the correct background.
To fix this you will need to change your html structure (or use javascript), because you can't select the a previous element based on current hovered element (the ~ selector is applied to the "next" element).
https://codepen.io/Kuldeep_2110/pen/MWvpZoR?editors=1100
Note : Made with bootstrap classes
#header{
position: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.15) ;
box-shadow: 0 0 0 rgb(0 0 0 / 10%);
}
h1,h2,h3,h4,h5,h6{
font-weight: 600;
line-height: 1.5;
font-family: Poppins,sans-serif;
}
a{
text-decoration: none;
}
.navbar{
padding: 0;
}
header .container-fluid{
padding: 0 30px;
}
.main-nav .nav-link{
display: block;
line-height: 22px;
padding: 14px 5px;
color: #666;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: Poppins,sans-serif;
}
.navbar-brand{
padding: 0 30px 0 0;
}
.nav-item{
position: relative;
}
.main-nav .nav-item .nav-link:hover{
color: #1abc9c;
}
.dropdown-1, .dropdown-2{
display: block;
opacity: 0;
margin-top: 15px;
z-index: -9999;
pointer-events: none;
border-top: 2px solid #1abc9c !important;
width: 240px;
position: absolute;
background-color: #fff;
box-shadow: 0 13px 42px 11px rgb(0 0 0 / 5%);
border: 1px solid #eee;
z-index: -99;
top: 100%;
left: 0;
padding: 10px;
visibility: hidden;
}
.megamenu{
left: 240px;
}
.dropdown-1 .nav-item, .dropdown-2 .nav-item{
display: none;
visibility: hidden;
}
.nav-link div>.bi{
float: right;
}
.nav-link div span .bi{
padding-right: 10px;
}
.dropdown-1 .nav-item .nav-link, .dropdown-2 .nav-item .nav-link{
padding: 10px 15px;
font-weight: 700;
border: 0;
transition: all .2s ease-in-out;
position: relative;
display: block;
line-height: 22px;
font-size: 12px;
color: #666;
letter-spacing: 0;
font-family: Lato,sans-serif;
}
.nav-item:hover>.dropdown-1, .nav-item:hover>.dropdown-2{
opacity: 1;
margin-top: 0;
z-index: 399;
visibility: visible;
pointer-events: all;
transition: opacity .2s ease,margin .4s ease;
}
.nav-item:hover > .nav-link{
color: #1abc9c;
}
.nav-item:hover>.dropdown-1 .nav-item, .nav-item:hover>.dropdown-2 .nav-item{
display: block;
visibility: visible;
}
.dropdown-1 .nav-item .nav-link:hover{
transform: translateX(5px);
background-color: #f7f7f7;
}
.megamenu ul .nav-item{
display: inline-block;
}
.search{
flex-direction: row;
}
.search .nav-link{
margin: 0 8px;
position: relative;
font-size: 18px;
display: inline-block;
}
.span{
display: block;
position: absolute;
top: 3px;
right: -1px;
font-size: 10px;
color: #fff;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 50%;
overflow: hidden;
background-color: #1abc9c;
opacity: 0.8;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<header>
<nav id="header" class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid justify-content-end">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav main-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#"><div>Home</div></a>
<ul class="dropdown-1">
<li class="nav-item">
<a class="nav-link" href=""><div>Niche Demos</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Block</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>One-Page Demos</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Corporate</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div>Home - Portfolio <i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 3</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Portfolio - Layout 4</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Blog <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Blog - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Blog - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Blog - Layout 3</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Shop <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 3</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Shop - Layout 4</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Magizine <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Magazine - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Magazine - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Magazine - Layout 3</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Landing page <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Landing Page - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Landing Page - Layout 2</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Landing Page - Layout 3</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Fullscreen <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Fullscreen - Layout 1</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Fullscreen - Layout 2</div></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href=""><div>Home - Onepage <i class="bi bi-chevron-right"></i></div></a>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href=""><div>Onepage default</div></a>
</li>
</ul>
<ul class="dropdown-2 megamenu">
<li class="nav-item">
<a class="nav-link" href=""><div>Onepage Submenu</div></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Features</div></a>
<ul class="dropdown-1">
<li class="nav-item">
<div><span><i class="bi bi-files"></i></span>Slider<i class="bi bi-chevron-right"></i></div>
<ul class="dropdown-2">
<li class="nav-item">
<a class="nav-link" href="">
<div>Revolution Slider<i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Premium Templates
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Full Screen
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Full Width
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Kenburns Effect
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
HTML 5 Video
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div>Canvas Slider<i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Full Width
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Fade Transition
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Autoplay Feature
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Custom Video Event
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Pagination Navigation
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Columns
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<div>Flex Slider<i class="bi bi-chevron-right"></i></div>
</a>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Default Layout
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
With Thumbs
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<div><span><i class="bi bi-umbrella"></i></span>Headers<i class="bi bi-chevron-right"></i></div>
<ul class="dropdown-2">
<li class="nav-item">
<a href="" class="nav-link">
Default Layout
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
With Thumbs
</a>
</li>
</ul>
</li>
<li class="nav-item">
<div><span><i class="bi bi-list"></i></span>Menu Styles<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-layout-split"></i></span>Mega Menu<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-receipt"></i></span>Forms</div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-gift"></i></span>Widgets<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-check-circle-fill"></i></span>Page Title<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-layout-text-window-reverse"></i></span>Side Panels<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-fullscreen"></i></span>Modal Onland<i class="bi bi-chevron-right"></i></div>
</li>
<li class="nav-item">
<div><span><i class="bi bi-grid-3x3-gap-fill"></i></span>Footers<i class="bi bi-chevron-right"></i></div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Pages</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Portfolio</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Blog</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Shop</div></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><div>Shortcodes</div></a>
</li>
</ul>
<ul class="navbar-nav search">
<li class="nav-item"><a class="nav-link" href=""><i class="bi bi-search"></i></a></li>
<li class="nav-item"><a class="nav-link" href=""><i class="bi bi-bag-fill"></i><span class="span">5</span></a></li>
</ul>
</div>
</div>
</nav>
</header>
I got a solution without JavaScript.
Note: the following will work for vertical sidebar menu, for horizontal Menubar it will occur a little modification.
Look at the Image of my navbar attached below, without JavaScript:
Wraper{
width : 270px;//mandatory
postion: relative; //mandatory
height: 100vh; //it will strech menu to full page
}
inside first ul{
position: relative;
z-index: 999;
height: 100%;
}
inside second ul{
display: none;//mandatory to hide initialy
float: left;//mandatory
clear: both;//mandatory
position: absolute; //first step to solve your issue.
left: 268; //2nd step - Put left value 2 unit less than width value in wrapper, so after removing mouse you wont face the issue.
}
My navbar
Here is an example Mega Menu (you can edit it accordingly); hover on the "Home" button in navbar to see hover effect.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
a{
display: block;
text-decoration: none;
}
header{
width: 100%;
background: brown;
padding: 10px 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
height: 100px;
}
.logo{
width: 150px;
}
.logo img{
width: 100%;
height: 80px;
}
.navbar ul{
list-style: none;
}
.nav{
display: flex;
}
.nav>.nav-item{
position: relative;
}
.nav>.nav-item>.nav-link{
padding: 35px 15px;
text-transform: uppercase;
}
.nav-link{
color: white;
font-size: 22px;
padding: 10px;
}
.nav-link:hover{color: yellow;}
.nav-dropdown{
position: absolute;
padding: 15px;
top: 100%;
left: 0;
background: brown;
border-top: 2px solid yellow;
width: 200px;
opacity: 0;
margin-top: 20px;
transition: all 300ms ease-in-out;
}
.nav-item:hover .nav-dropdown{
opacity: 1;
margin-top: 0;
}
.nav-dropdown+.nav-dropdown{
left: 200px;
border-left: 2px solid yellow;
}
.nav-dropdown .nav-item .nav-link:hover{
background: rgba(205, 92, 92, 0.4);
transform: translateX(5px);
transition: all 300ms ease-in-out;
box-shadow: inset 0 0 15px 5px indianred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mega Menu Snippet</title>
<link rel="stylesheet" href="style.css">
<style>
h1{
color: white;
font-family: monospace;
text-transform: uppercase;
}
</style>
</head>
<body>
<header>
<div class="logo">
<img src="contest/section.png" alt="logo">
</div>
<nav class="navbar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="">
Home
</a>
<ul class="nav-dropdown">
<h1>Section 1</h1>
<li class="nav-item">
<a href="" class="nav-link">
Home 1
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 2
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 3
</a>
</li>
</ul>
<ul class="nav-dropdown">
<h1>Section 2</h1>
<li class="nav-item">
<a href="" class="nav-link">
Home 1
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 2
</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">
Home 3
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
Contact
</a>
</li>
</ul>
</nav>
<div class="user">
<!-- Icons -->
</div>
</header>
</body>
</html>

How to make bootstrap nav-tabs to slide?

I have made nav-tabs using bootstrap. The tabs change the body content. I want to fit only 5 tabs at one time and want to add a slider on the nav-tabs.Using flexslider somehow changes the UI effect. Please can anyone help on this.
Here is the fiddle https://jsfiddle.net/pq7Lzu1t/1/
<div class="row">
<div class="col-md-12">
<div class="color_gray_shad height_box flexsliderDenim">
<ul class="nav nav-tabs slides">
<li id="denim_li1" class="active info_list" style="margin-left: 12%;"> <a class="info_tab" href="#tab1default" data-toggle="tab" role="tab"> <img class="img-responsive denimImagePad" src="http://placehold.it/50x80"></a>
</li>
<li id="denim_li2" class="info_list"> <a class="info_tab" href="#tab2default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
<li id="denim_li3" class="info_list" style="width: 16%;"> <a class="info_tab" href="#tab3default" data-toggle="tab" role="tab"><img class="img-responsive" src="http://placehold.it/50x80" style="position: absolute;top: 36%;"></a>
</li>
<li id="denim_li4" class="info_list"> <a class="info_tab" href="#tab4default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80"></a>
</li>
<li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
<li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
<li id="denim_li5" class="info_list"> <a class="info_tab" href="#tab5default" data-toggle="tab" role="tab"><img class="img-responsive denimImagePad" src="http://placehold.it/50x80" style="position: absolute;top: 22%;"></a>
</li>
</ul>
</div>
</div>
CSS
.color_gray_shad {
/* background-color:#EEEEEE; */
}
.height_box {
height:18%;
}
.nav-tabs>li.info_list {
width:14%;
}
.nav-tabs>li.active>a.info_tab:before {
content:' ';
position: absolute !important;
width: 0;
height: 0;
left: 43%;
top: 111px;
border: 10px solid;
border-color: #C04C36 transparent transparent transparent;
z-index: 100;
}
.nav-tabs>li.active>a.info_tab, .nav-tabs>li.active>a.info_tab:focus, .nav-tabs>li.active>a.info_tab:hover {
background-color: #C04C36;
text-align: center;
height: 113px;
background-color: #C04C36;
border: 1px solid #C04C36;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* -webkit-box-shadow: 2px 2px 4px #002554; */
-moz-box-shadow: 2px 2px 4px #C04C36;
/* box-shadow: 2px 2px 4px #002554; */
}