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>
Related
So I created a navigation menu for a website and it is mobile responsive(CSS Only). However when in responsive mode it converts the menu vertically which is good. I still want the menu to be vertically stacked, however I want it hamburger style for professional reasons. How do I change my responsive menu to be hamburger style? I would like for it to be built with CSS only as well.
I found one example of hamburger style that uses javascript, is it possible to do this with CSS only?
Here is the current responsive menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0 charset = "UTF-8>
<title>Responsive Menu</title>
<style>
nav {
list-style-type: none;
margin-left: -9px;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:x-large;
float:left;
padding-bottom:10px
}
nav a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
#media screen and (max-width: 700px) {
nav a {
text-align: center;
float: none;
}
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<nav>
<a class="navbar-brand" href="/">
<img src= "logo.png" width="60px" height="50px" class="center" >
</a>
Home
News
example
example2
example
<a style="float:right" href="#form">Form</a>
<a style="float:right" href="#registration">Registration</a>
</nav>
</body>
</html>
And here is a hamburger example that I want my responsive version to look like but I am not sure how to convert:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<nav class="topnav">
<section id="myLinks">
Home
News
example
</section>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</nav>
<main style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</main>
<!-- End smartphone / tablet look -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
</body>
</html>
try this
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Something</a>
</li>
</ul>
</div>
</nav>
I have used bootstrap to create the navbar and i want to add some extra effect on it.
I want to make a sticky navbar with bootstrap, with the effect of adding a red underline for each <a> tag. But when I scroll down, the red underline effect is disabled and the navbar and the numbers overlapped.... Can anyone tell me why?
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>
Your .navbar-scroll's background-color has a transparency value of 0.7, which makes the content shine through it when you scroll down. Just change the background-color to white or the transparency value to 1 (background-color: rgba(255,255,255,1)).
Concerning the red underlines on the nav links: They do appear on hover (?)
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,1);
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>
Update my-navbar class css
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
z-index: 1;
background-color: rgba(255,255,255,1) !important;
}
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
z-index: 1;
background-color: rgba(255,255,255,1) !important;
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</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>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
body{
background:url(background.jpg);
background-size: cover;
}
h1{
font-family: 'Dancing Script', cursive;
font-size: 5em;
color: white;
text-align: center;
margin-top: 25px;
margin-bottom: 20px;
}
h2{
font-size: 18px;
color: white;
text-align: center;
font-family: 'Tajawal', sans-serif;*/
}
hr{
border-color: white;
margin-left: 200px;
margin-right: 200px;
}
img{
float: center;
width: 20%;
height: 20%;
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
}
li{
display: inline;
text-align: center;
font-family: 'Tajawal', sans-serif;
}
.btn-group{
display: flex;
justify-content: center;
margin-top: 10px;
margin-bottom: 50px;
}
.btn-group button {
align-items: center;
background-color: rgba(135, 138, 138, 0.1);
border: none;
color: white; /* White text */
padding: 10px 24px; /* Some padding */*/
cursor: pointer; /* Pointer/hand icon */
float: /* Float the buttons side by side */
box-shadow: 1px;
margin: 0 auto;
}
.btn-group button:not(:last-child) {
border-right: none; Prevent double borders
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(49,52,56);
border: 1.5px solid rgb(49,52,56);
}
.btn-group button:focus {
background-color: rgb(49,52,56);
outline: rgb(49,52,56);
border-color: rgb(49,52,56);
border: 1px solid rgb(49,52,56);
}
.btn-group a{
color: white;
}
.btn-group a:hover {
text-decoration: none;
}
/**/
/* Style the tab */
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Tajawal" rel="stylesheet">
</head>
<body>
<!-- -->
<div class="heading">
<h1>Portfolio</h1>
</div>
<div class="btn-group">
<div class="tab"><button class="tablinks" onclick="openMenu(event, 'home')"> Home</button></div>
<div class="tab"><button class="tablinks2" onclick="openMenu(event, 'portfolio')">Portfolio</button></div>
</div>
<div id="home" class="tablinks">
<h2>My name is I am a Front End Web developer from . I have a passion for UX/UI and I m currently seeking employment around the country. I am willing to work remote as well as relocate. Take a look at my work and contact me via the info below to learn more.
<br>
<img src="treeshot.gif">
<p>
<li>HTML5 * </li>
<LI>CSS3 * </LI>
<li>JavaScript * </li>
<li>React * </li>
<li>Wordpress * </li>
<li>UX/UI * </li>
<li>Sketch * </li>
<li>Adobe Suite * </li>
<li>Passion and drive to continue learning</li>
</p>
<br>
<hr>
</h2>
</h2>
</div>
<div id="Projects" class="tablinks2">
Projects
</div>
<script type="text/javascript" src="script.js"></script>
</body>
So far I have made two square buttons into a horizontal bar below my header. I have hyperlinks added to the buttons, but I want to make them tabs so the header does not move and you can cleanly scroll between the two pages with no load time. I will post html and css. Thank you for the help. I have tried using js and css but neither seem to make what it do what I want
As i can see you're using bootstrap 4. So the best way to do what you want is using nav tabs. Check bootstrap documentation. Here is the example:
<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">Home</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">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> </div>
Bootstrap docs
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 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>