body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
float: left;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
ul.social-icons li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
ul.social-icons li a.facebook {
background-position: 0px 0px;
}
ul.social-icons li a.facebook:hover {
background-position: 0px -50px;
}
ul.social-icons li a.instagram {
background-position: -150px 0px;
}
ul.social-icons li a.instagram:hover {
background-position: -150px -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="connect-social">
<li></li>
<li></li>
</li>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
I have added the code to show social icons in the nav bar, but the image for icons is not shown, if hovered on the area it shows that it is clickable but image does not loads. Any help would be appreciated
It appears that you don't have anything inside of the href tags for your media links. In this codepen link, specifically on line 150 I added in an example image for the linkedin icon.
<li><img src="http://static2.intelimedia.pl/sub/Narysuj-sobie-Gonka-w17896.jpg" style="height:30px;"></li>
change some CSS & HTML
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="social"></li>
<li class="social"></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
CSS
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
li.social a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
li.social a.facebook {
background-position: 0px 0px;
}
li.social a.facebook:hover {
background-position: 0px -50px;
}
li.social a.instagram {
background-position: -150px 0px;
}
li.social a.instagram:hover {
background-position: -150px -50px;
}
https://jsfiddle.net/7pycxo8k/3/
Related
My app requires Bootstrap. However, it is overriding my custom CSS then the navbar that I have set is now displayed in a weird manner. What am I doing wrong and what can do to fix it? My end goal is to let the bootstrap work along side with the css.
Here is the image for more clarification:
The HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Client Server Application Project</title>
<link rel="stylesheet" href="faq.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<!--BootStrap CSS-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"
></script>
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>
Our Services
<ul>
<li>Gyms Training</li>
<li>Gym Location</li>
</ul>
</li>
<li>
Login
</li>
</div>
<li class="search-icon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fas fa-search"></span>
</label>
</li>
</ul>
</nav>
<div class="container">
<div class="header">
<h1>Frequently Asked Questions</h1>
</div>
<br><br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
FAQs
</li>
</ul>
<p class="copyright">
<small>©2022 Singapore Polytehnic</small>
</p>
</footer>
<!--BootStrap JavaScript-->
</body>
</html>
The CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background: #1b1b1b;
}
nav:after{
content: '';
clear: both;
display: table;
}
nav .logo{
float: left;
color: white;
font-size: 27px;
font-weight: bold;
line-height: 70px;
padding-left: 60px;
}
nav ul{
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li{
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a{
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover{
color: cyan;
border-radius: 5px;
box-shadow: 0 0 5px #33ffff,
0 0 5px #66ffff;
}
nav ul ul li a:hover{
color: cyan;
box-shadow: none;
}
nav ul ul{
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
nav ul li:hover > ul{
top: 70px;
display: flex;
flex-direction: column;
opacity: 1;
visibility: visible;
}
nav ul ul li{
position: relative;
margin: 0px;
width: 150px;
float: none;
display: list-item;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
nav ul ul li a{
line-height: 50px;
}
nav ul .search-icon{
height: 40px;
width: 240px;
display: flex;
background: #f2f2f2;
border-radius: 5px;
}
nav ul .search-icon input{
height: 100%;
width: 200px;
border: none;
outline: none;
padding: 0 10px;
color: #000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
nav ul .search-icon .icon{
height: 100%;
width: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
nav ul .search-icon .icon:hover{
background: #e6e6e6;
}
nav ul .search-icon .icon span{
color: #222222;
font-size: 18px;
}
#media screen and (max-width:968px){
nav .logo{
display: none;
}
nav ul div.items{
flex: 3;
}
nav ul .search-icon{
display: none;
}
}
.header{
width: 100%;
height: 100px;
margin-top: 100px;
background-color: crimson;
color:white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.container{
display: block;
margin: 0 auto;
width: 100%;
height: 700px;
}
.footer{
padding: 40px;
background-color: chartreuse;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color:#4b4c4d;
}
.footer .social a{
display: inline-block;
height: 40px;
width: 40px;
background:rgb(0, 0, 0);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color:#ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover{
color:#24262b;
background-color: #ffffff;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color:inherit;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
}
.footer .copyright{
margin-top: 15px;
text-align: center;
font-size: 20px;
color:black;
}
Much help is appreciated!
I think Your Bootstrap link is not working properly.
actually, Bootstrap purpose is reducing css No of line codes.
simply, You can follow my steps..
Try to use this Link:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Finally, you can search on bootstrap, what you want to use.
https://getbootstrap.com/docs/5.1/components/navbar/
If you want to use Navbar? simply copy and paste your project..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Helo all. How can I prevent .slideUp for my drop down menu. I want the drop down menu slide up only if I leave the area of button which is .personal-mega and the .flyout.
This is the [example][1] link that I want to achieve.
I did try to adjust the js but it is not working.
$(document).ready(function(){
$(".personal-mega").hover(
function() {
$('.flyout', this).not('.in
.flyout').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.flyout', this).not('.in
.flyout').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
Here is the snippet:
(The menu is responsive please view it with full page)
$(".personal-mega").hover(function(){
$('.flyout').slideDown("400");
});
/*
$(document).ready(function(){
$(".personal-mega").hover(
function() {
$('.flyout', this).stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.flyout', this).stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});*/
/* navbar/top navbar */
.pos-navbar{
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
.pos-main-nav li a, .pos-top-nav li a{
text-transform: uppercase;
font-weight: 500;
}
.bg-pos{
background-color: #DF1E34;
}
.pos-menu{
border: 1px solid #DF1E34;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
overflow: hidden;
}
.pos-menu a{
color: #DF1E34 !important;
}
.pos-menu:hover{
transition: all 0.6s ease;
}
.pos-menu:hover a{
color: #FFFFFF !important;
}
.pos-top-menu{
border: 1px solid #FFFFFF;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
}
.pos-top-menu button{
text-transform: uppercase;
font-size: 14px;
background-color: transparent;
border: none;
}
.pos-top-menu button:focus{
box-shadow: none;
}
.pos-top-menu button:after{
content: none;
}
.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show>button.dropdown-toggle,
.pos-top-menu button:hover{
color: #FFFFFF;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
/*.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show > button.dropdown-toggle{
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}*/
.pos-top-menu ul{
padding : 0;
top: 10px !important;
left: -30px !important;
overflow: hidden;
}
.pos-top-menu ul .dropdown-item{
padding: 0;
}
.pos-top-nav li a{
font-size: 14px;
color: #FFFFFF !important;
}
.pos-top-nav .pos-top-menu ul li a{
color: #666666 !important;
}
.pos-top-nav li a:active,
.pos-top-nav li a:focus,
.pos-top-nav li a:hover{
color: #333333 !important;
}
.no-link{
pointer-events: none;
cursor: default;
}
.nav-item{
display: inline-block;
}
/* overide hover.css */
.hvr-sweep-to-bottom:before{
background: #DF1E34;
}
.hvr-underline-from-center:before{
left: 50%;
right: 50%;
background: #DF1E34;
height: 2px;
}
.flyout {
position:absolute;
width:100%;
background:red;
overflow: hidden;
z-index:10000000;
}
.hidden {
display:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- navbar -->
<nav class="pos-navbar navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pos-logo.svg" width="50%" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="pos-main-nav navbar-nav ml-auto">
<li class="nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover personal-mega" href="#">Personal</a>
</li>
<li class="nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link" href="#">Business</a>
</li>
<li class="nav-item" style="width: 20px;"></li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Digital Mailbox</a>
</li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Promotion</a>
</li>
<li class="nav-item">
<a class="nav-link no-link" href="#">|</a>
</li>
<li class="nav-item hvr-float">
<a class="nav-link" href="#" data-toggle="modal" data-target=".search-modal-lg"><img src="img/icon-search.svg" width="20"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="flyout hidden container-fluid">131231<br>1<br>1<br>1<br>1</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
I have a wizard form made in bootstrap, i need to validate each step of the form wizard, how it is now is possible to go to the next step with empty inputs. And since there is quite a issue regarding bots, etc, what is the best way of validating each step on a form?
Here is the snippet:
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
#media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
A simple but effective method for stopping a bot is called a honey spam pot. To implement this you can add an extra input at the end of your form and hide it within the css. Using PHP (advised for form validation!) you can check if that field is empty or not. If it is not empty then you know a bot has entered data into the input because a bot will try and avoid any validation by filling all the fields in. Validation in JavaScript or jQuery is more of a feature than a MUST use as it can be turned off by the user in their browser.
I'm using the Yamm mega menu for Bootstrap 3 and need a multi dropdown to work as a grid.
The first dropdown section is within the first 4 column grid, then the second half of the dropdown should go into the second 4 column grid and lastly the third one goes into the final 4 column grid.
http://geedmo.github.io/yamm3/#navbar-collapse-grid
Something similar to this http://www.bentleymotors.com/en.html but without all the moving animation. Bare in mind to activate parts of the dropdown, you need to click on the arrows to the right. Something I didn't find obvious at first.
This is what I have so far, I must warn you that it currently isn't within a grid, because when I tried, it just broke the whole dropdown. I'm guessing that I shouldn't do the CSS only version of a multi dropdown and instead use some javascript and somehow separate it into their own divs. Please not that there could also be more than one multi dropwdown within the nav, but they should always be 3 levels deep max.
HTML
<nav class="navbar yamm navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="grid">
<div class="row">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown yamm-fw">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</li>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
CSS
img { width: 100%; }
.carousel {
height: 700px;
overflow: hidden;
}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
color: #fff;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
margin-top: -100px;
}
h2, h2 a, h2 a:hover {
color: #0a7a3f;
margin-top: 20%;
}
h2 a:hover {
text-decoration: none;
}
.navbar{
margin-bottom: 0;
}
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
.navbar-default {
background: #0a7a3f;
border: none;
}
.grid { padding: 10px; }
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
background-color: #fff;
color: #000;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
EDIT: JSFiddle - http://jsfiddle.net/kr1j2gbu/
I have found your question because I was also interested in similar functionality, but such that would be more responsive (for mobile devices to do it on click).
Here below is the solution, in case someone else needs it, too:
For Bootstrap 3.1.1
Run it with JSfiddle: http://jsfiddle.net/chirayu45/Khh4C/1/
Look for this similar question, too.
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
CSS:
.dropdown-menu>li
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.left-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
JS:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
I'm just learning Bootstrap 3 and I want to use that in my website so it's still comfortable to access from mobile devices.
I want to achieve something like this:
but this is as far as I get.
This is the code:
jsfiddle
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: inline-block;
margin:auto;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
#media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<img src="image/nav_logo.png"/>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Product</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<div class="social">
<a class="pull-left icon" href="#" data-icon = "f"></a>
<a class="pull-left icon" href="#" data-icon = "i"></a>
</div>
</div>
</div>
</body>
</html>
I would have done this:
nav {
width: 100%;
}
.img-holder {
width: 50px;
height: 50px;
margin: 0 auto;
background-color: red;
position: relative;
}
ul,li {margin:0;padding:0;}
ul {
width: 304px;
position: absolute;
top: 20px;
}
li {
width: 150px;
text-align: center;
float: left;
display: inline-block;
border: 1px solid #d8d8d8;
}
.left-ul {
left: 50%;
margin-left: -350px;
}
.right-ul {
right: 50%;
margin-right: -350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="img-wrapper">
<ul class="left-ul">
<li>ABOUT</li>
<li>PRODUCT</li>
</ul>
<div class="img-holder"></div>
<ul class="right-ul">
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
Just add this to your css
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
max-width: 480px; /**change the max width to what ever you want you can add it in media query too*/
margin: 0 auto; /**center the menu*/
}
live Demo
I haven't tried it myself but you could try using input group classes: bootstrap: align input with button.
In general, if you know the height of a block element, if you set its line height to that height you'll get one line that is centered vertically in that space; just watch out for items going to two lines or more, then it breaks.
You will need to make a few changes to both your CSS and HTML.
HTML-wise, make all the items (inlcluding the image), navbar li items and remove the left and right navbar classes.
Then you will need to center the navbar using in its uncollapsed state by applying text-align on the parent and unfloating the children, using:
#media (min-width: 768px) {
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
}
Demo Fiddle
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: inline-block;
margin: auto;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
#media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse ">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="divider-vertical"></li>
<li>Product
</li>
<li>
<a href="#" class="navbar-brand">
<img src="image/nav_logo.png" />
</a>
</li>
<li>About
</li>
<li class="divider-vertical"></li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="social">
<a class="pull-left icon" href="#" data-icon="f"></a>
<a class="pull-left icon" href="#" data-icon="i"></a>
</div>
</div>
</div>