The toggle button used in my html code is not working. I tried to design with bootstrap. I'm new to bootstrap. I gave my index.html file and main.js file. I have no idea where my mistake is. Since I am a beginner, it is very helpful to have your help. Thanks in advance to everyone.
My index.html file:
<!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>Admin panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="default.jpg" class="img-fluid" alt="Responsive image">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name</div>
<div class="email">Email</div>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li>
Dashboard
</li>
<li>
Pending Request
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 1
</li>
</ul>
</li>
<li class="active">
Policy
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Toggle button -->
<button id="sidebarCollapse" type="button" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="fa fa-bars mr-2"></i><small class="text-uppercase font-weight-bold">Toggle</small></button>
<!-- Demo content -->
<h2 class="display-4 text-black">Bootstrap vertical nav</h2>
<p class="lead text-black mb-0">Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.</p>
<div class="separator"></div>
<div class="row text-black">
<div class="col-lg-12">
</div>
</div>
</div>
<!-- End demo content -->
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
My main.js file:
$(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
});
});
My style.css file
body {
font-family: 'poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
/* Side Bar */
.wrapper {
display: flex;
text-decoration: none;
transition: all 0.3s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 0rem;
transition: all 0.4s;
}
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar .active {
background-color: #e2694b;
}
.components li .active {
background-color: #261313;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul .components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7385D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapase"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
#sidebar img {
width: 30%;
}
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar .active {
margin-left: 0px;
}
#sidebarCollapase span {
display: none;
}
}
function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
<!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>Admin panel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<img src="default.jpg" class="img-fluid" alt="Responsive image">
<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Name</div>
<div class="email">Email</div>
</div>
<ul class="list-unstyled components">
<p>The Providers</p>
<li>
Dashboard
</li>
<li>
Pending Request
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 1
</li>
</ul>
</li>
<li class="active">
Policy
</li>
<li>
Logout
</li>
</ul>
</nav>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<button data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-light bg-white rounded-pill shadow-sm px-4 mb-4"><i class="fa fa-bars mr-2"></i><small class="text-uppercase font-weight-bold">Toggle</small></button>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h2 class="display-4 text-black">Bootstrap vertical nav</h2>
<p class="lead text-black mb-0">Build a fixed sidebar using Bootstrap 4 vertical navigation and media objects.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
Related
I'm new to the laravel environment. I've been working with a navbar and collapsible sidebar, both of them have a dropdown menu. All of a sudden, I changed some styles and now both of them are not working anymore. Any help would be appreciated.
Here are my files:
Layout.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#yield('title')</title>
<!--Bootstrap, Jquery, Pooper, FontAwesome-->
<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
<script src="https://kit.fontawesome.com/942404b945.js" crossorigin="anonymous"></script>
<!--/Bootstrap, Jquery, Pooper, FontAwesome-->
<style>
.dropdown-toggle::after {
content: none;
}
</style>
</head>
<body class="hidden-sn grey-skin">
<!--Double navigation-->
<header>
#include('shared.navbar')
#include('shared.sidebar')
</header>
<!--/.Double navigation-->
<!--Content-->
<main id="main" class="col-lg-12 pt-1">
#yield('content')
</main>
<!--/.Content-->
<!--Scripts-->
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
$(document).on("click",".dropdown-toggle",function(){
$(this).dropdown();
});
</script>
<!--/.Scripts-->
#include('shared.modal-crear')
#include('shared.modal-editar')
<!--Plugins-->
<script src="{{ asset('plugins/jquery/js/jquery.js') }}"></script>
<script src="{{ asset('plugins/bootstrap/js/bootstrap.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
<!--/.Plugins-->
</body>
</html>
navbar.blade.php
<!-- Navbar -->
<nav id="navbar" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg shadow p-2 mb-1 ">
<!-- SideNav slide-out button -->
<div class="float-left pl-2">
<a class="button-collapse"><button type="button" id="sidebarCollapse" onclick="openNav()" class="btn">
<i class="fa fa-bars" aria-hidden="true"></i></button></a>
</div>
</hr>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto px-4">
<a href="/">
<strong id="nav-title">Dimiforms</strong>
</a>
</div>
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item dropdown">
<a id="nav-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-haspopup="true" aria-expanded="false">
#yield('User-name', 'Default') | Usuario
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="">Mi cuenta</a>
<a class="dropdown-item" href="{{ route('usuario_logout')}}">Salir</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
Sidebar.blade.php
<div class="sidebar float-left" id="sidebar">
×
<div class="text-center">
<img src="https://www.w3schools.com/w3images/avatar6.png" class="avatar mx-auto">
<h6>#yield('User-name')</h6>
</div>
<hr>
<div class="items-container">
<a href="cuenta" >
<h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i> | Cuenta</h6>
</a>
<a href="formularios">
<h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i> | Formularios</h6>
</a>
<a href="estadisticas">
<h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i> | Estadisticas</h6>
</a>
<a class="dropdown-toggle dropdown items-container" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target="#sidebar-dropdown">
<h6 class="menu-item"><i class="fas fa-laptop-code"></i> | Dimiforms</h6>
<div class="dropdown-menu" id="sidebar-dropdown" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="{{ route('display_crear_formulario')}}" data-toggle="modal" data-target="#modal-crear">Crear Formulario</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('display_editar_formulario')}}" data-toggle="modal" data-target="#modal-editar">Editar Formulario</a>
</div>
</div>
</a>
<hr>
<a href="about">
<h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i> | Acerca de</h6>
</a>
</div>
styles.css
/*general stuff*/
a {
text-decoration: none !important;
}
/*sidebar*/
#sidebar {
height: 100%;
width: 0;
z-index: -inherit;
position: fixed;
left: 0;
background-color: #2c3e50;
padding: 60px 0 0 0;
top: 55px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 1s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar h6 {
color: rgb(255, 255, 255);
margin-top: 7px;
}
.sidebar a{
padding: 4px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: 0.8s;
background-color: inherit !important;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: #c36618 !important;
}
.items-container{
text-decoration: none;
color: white;
}
.menu-item, .dropdown-item{
padding: 6px 0 10px 20px;
transition: 0.8s;
cursor: pointer;
}
.menu-item:hover{
background-color: white;
color:#2c3e50;
}
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50px 50px 50px 50px;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
}
/*sidebar*/
/*navbar*/
#navbar {
background-color: #c36618;
border: none !important;
height: 60px;
}
#sidebarCollapse{
background-color: transparent;
color: #fafafa;
}
#sidebarCollapse:hover {
background-color: white;
color: #c36618;
}
#nav-title, #nav-dropdown{
color: #ffffff;
}
/*main*/
main{
padding: 0 0 0 25%;
transition: margin-left 1s; /* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
/* Dropdowns */
.dropdown-item{
display: block;
transition: 0.8s;
color: #2c3e50 !important;
background-color: transparent !important;
}
.dropdown-item:hover{
color:#c36618 !important;
}
.dropdown{
width: inherit;
background-color: inherit !important;
border: 0px;
}
/* Modals */
.submit-button{
background-color: #2c3e50;
color:white;
border-radius: 8px;
}
I fixed it by changing the order of the bootstrap, Jquery and main css files.
I had two bootstrap files imported as well.
I need some help because I can't find a way to customize the way bootstrap cards are displayed on the screen.
For example, when the screen width is 860 I would like for it to only load 2 cards instead of 3 and when the width is like 600 it to load 2 but smaller so they fit in the same row! Is there any way I can achieve this result?
/* Title */
#cc{
position: relative;
text-align: center;
margin-top: 180px;
}
#Slogan{
text-transform: uppercase;
font-weight: 400;
font-size: 70px;
}
.text-gray-soft{
margin-top: 6px;
color: rgba(0, 0, 0, 0.5);
}
#btn{
margin-top: 20px;
}
/* Newest TAB */
#media (min-width: 500px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 50px;
}
.line1{
margin-right: 50px;
}
.card{
position: relative;
margin-bottom: 20px;
text-align: center;
}
}
#media (min-width: 992px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 200px;
}
.line1{
margin-right: 200px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1300px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 300px;
}
.line1{
margin-right: 300px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1800px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 400px;
}
.line1{
margin-right: 400px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="static/css/index.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">BoostTemplates</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Shop</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
<div class="cointainer" id="cc">
<h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
<h5 class="text-gray-soft">All the themes you need in one place.</h5>
<button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
</div>
<div class="cointainer" id="nn">
<h4 class="display-5 NewestT">Newest</h4>
<h6 class="text-gray-soft">Recently added to the shop</h6>
<hr class="line1">
</div>
<div class="container" id="containerpart">
<div class="row">
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
The idea is that you define a row and inside it, you define your cols.
Imagine each row to be divided into 12 sections. You then assign on each col how many of these sections you want it to cover, on each screen size category.
Thus if you want on small screens to have 2 cards per row and on bigger screens 3 per row, you set col-6 col-md-4, this means on Extra small screens (smaller than 576px) cover 6 out of 12 (1/2), while on small screens or bigger (greater or equal to 576px) cover 4 out of 12 (1/3).
Example code:
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">
Card 1
</div>
<div class="col-6 col-sm-4">
Card 2
</div>
<div class="col-6 col-sm-4">
Card 3
</div>
<div class="col-6 col-sm-4">
Card 4
</div>
<div class="col-6 col-sm-4">
Card 5
</div>
<div class="col-6 col-sm-4">
Card 6
</div>
</div>
</div>
Based on your code
/* Title */
#cc{
position: relative;
text-align: center;
margin-top: 180px;
}
#Slogan{
text-transform: uppercase;
font-weight: 400;
font-size: 70px;
}
.text-gray-soft{
margin-top: 6px;
color: rgba(0, 0, 0, 0.5);
}
#btn{
margin-top: 20px;
}
/* Newest TAB */
#media (min-width: 500px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 50px;
}
.line1{
margin-right: 50px;
}
.card{
position: relative;
margin-bottom: 20px;
text-align: center;
}
}
#media (min-width: 992px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 200px;
}
.line1{
margin-right: 200px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1300px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 300px;
}
.line1{
margin-right: 300px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
#media (min-width: 1800px) {
#nn{
position: relative;
text-align: left;
margin-top: 130px;
margin-left: 400px;
}
.line1{
margin-right: 400px;
}
.card{
margin-bottom: 20px;
margin-left: 30px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="static/css/index.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">BoostTemplates</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Shop</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</nav>
</div>
<div class="cointainer" id="cc">
<h1 class="display-1 text-bold" id="Slogan">Make <br>anything</h1>
<h5 class="text-gray-soft">All the themes you need in one place.</h5>
<button type="button" class="btn btn-dark btn-lg" id="btn" >SHOP</button>
</div>
<div class="cointainer" id="nn">
<h4 class="display-5 NewestT">Newest</h4>
<h6 class="text-gray-soft">Recently added to the shop</h6>
<hr class="line1">
</div>
<div class="container" id="containerpart">
<div class="row">
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card" style="width: 18rem;">
<img src="static/images/BS_Dashboard-400x300.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Dashboard</h5>
<p class="card-text">Clean and simple dashboard and admin interface.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
Please help me with my code I have added in js fiddle
I have added it in js fiddle..Can you please check once and let me know
I have added my css,Please check once and let me know where the problem really occurs
As I have separated my header.php file and included in all pages
but only the horizontal lines are showing in mobile and while clicking on it, nothing happens.
Here is my code (in dropdown I have written the same with my content)
<html lang="en">
<head>
<title>Best Hair Transplant Clinic in Hyderabad, Vijayawada and Bangalore</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="GA Digital Solutions">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="plugins/OwlCarousel2-2.2.1/animate.css">
<link href="plugins/jquery-datepicker/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>
<style>
.dropbtn {
background-color: #ffffff;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
} .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
} .dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #ffffff;}
.icon-bar {
position: fixed;
top: 60%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} .icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
} .icon-bar a:hover {
background-color: #000;
}
<header class="header trans_400" style="height:140px">
<div class="header_content d-flex flex-row align-items-center jusity-content-start trans_400">
<!-- Logo -->
<div class="logo">
<a href="index.php">
<img src="images/logo.png">
</a>
</div>
<!-- Main Navigation -->
<nav class="main_nav" style="margin-top:50px">
<ul class="d-flex flex-row align-items-center justify-content-start">
<!--<li class="active">HOME </li>-->
<li class="">HOME </li>
<li>ABOUT US</li>
<div class="dropdown">
<li class="dropbtn">SERVICES</li>
<div class="dropdown-content">
<a class="dropdown-item" href="hair-transplant-in-india.php"><?php echo strtoupper("Hair Transplant");?></a>
<a class="dropdown-item" href="fue-hair-transplant.php">FUE Hair Transplant</a>
<a class="dropdown-item" href="fut-hair-transplant.php">FUT Hair Transplant</a>
<a class="dropdown-item" href="hair-transplant-in-india.php">Hair Replacement</a>
<a class="dropdown-item" href="prp-hair-treatment.php">PRP Hair Treatment</a>
<a class="dropdown-item" href="hair-loss-treatment-in-india.php">Hair Loss Treatment</a>
<a class="dropdown-item" href="laser-hair-therapy.php">Lase Hair Therapy</a>
<a class="dropdown-item" href="hair-extensions.php">Hair Extensions</a>
<a class="dropdown-item" href="laser-hair-comb.php">Laser Hair Comb</a>
</div>
</div>
<li>OUR RESULTS</li>
<li>BLOGS</li>
<li>CONTACT </li>
</ul>
</nav>
<div class="header_extra d-flex flex-row align-items-center justify-content-end ml-auto">
<!-- Appointment Button -->
<div class="button button_1 header_button" style="margin-top:45px">Get a Consultation</div>
<!-- Header Social -->
<div class="" style="margin-top:40px">
<ul class="d-flex flex-row align-items-center justify-content-start">
<li><img src="images/whatsapp.png" height="40px" width="40px" style="margin-top:12px"></li>
</ul>
</div>
<!-- Hamburger -->
<div class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
</div>
<div class="icon-bar" style="padding-left:1300px">
<a href="#phonecall" class="phone">
<i class="fa fa-phone">
</i>
</a>
</div>
</header>
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
im not sure way but javascript doesnt work when i run it..im using chrome and Firefox and when i debugged it nothing came up.
help my if you can ..
also when im adding the <!doctype html> to my code the nav and header disappear..
this is my html
<html>
<head>
<title>final project</title>
<link rel="stylesheet" type="text/css" href="css/final.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrep">
<nav>
<ul class="nav nav-pills pull-right">
<li role="navigation" class="active">Home</li>
<li role="navigation">About Us</li>
<li role="navigation">Contact Us</li>
</ul>
<ul class="nav nav-pills pull-left">
<li role="menu" class="omer">omer</li>
</ul>
<div class="icon-menu">
<span class="glyphicon glyphicon-list"><text>Menu<text></span>
</div>
</div>
</nav>
<header></header>
<div class="main" id="grad"><h1>Welcome to ducati</h1>
<div class="row">
<div class="col-md-2 box" id="box1">
<span class="glyphicon glyphicon-headphones"></span>
<p>Lorem ipsum</p>
</div>
<div class="col-md-2 box" id="box2">
<span class="glyphicon glyphicon-music"></span>
<p>Lorem ipsum</p>
</div>
<div class="col-md-2 box" id="box3">
<span class="glyphicon glyphicon-download-alt"></span>
<p>Lorem ipsum</p>
</div>
<div class="col-md-2 box" id="box4">
<span class="glyphicon glyphicon-shopping-cart"></span>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<footer> © All right belong to me :)</footer>
</div>
<script src="js/final.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
this is my javascript
var main = function() {
$('.omer').click(function() {
$('.wrap').animate({
left: "285px"
}, 200);
});
$(document).ready(main);};
and this is my css
* {
margin: 0;
padding: 0;
font-family: arial;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
header {
background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
height: 55%;
background-repeat:no-repeat;
background-size:100%;
background-position: center center;
border-top:2px solid black;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
float:left;
position:relative;
}
.icon-menu:hover{
background:#E3E3FF;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-sizing: border-box;
height:40px;
width:100px;
}
.icon-menu span{
margin-left: 10px;
margin-top: 8px;
font-size:20px;
color: rgb(51, 122, 183);
}
.icon-menu span text{
font-size:20px;
margin-left:4px;
}
.main h1{
text-align:center;
margin:auto;
}
.main span{
text-align:center;
font-size:30px;
margin-top:10px;
}
.main{
position: relative;
background: lightgrey;
height: 60%;
border-bottom:2px solid black;
text-align:center;
}
#grad {
background: -webkit-linear-gradient(left top, gray,gray,red,gray,white ); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, gray,gray,red,gray,white); /* Standard syntax */
}
#box1{
margin-left:170px;
background-image:linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2YZ8vH8ya8CmAfxdelGL1Yg2H9wnubKmiMjTfa_-oUyWMBJrsg');
}
#box2{
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}
#box3{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}
#box4{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}
.glyphicon{
color: red;
}
.col-md-2{
position: absolute;
left: 10px;
top: 10px;
background: lightbrown;
width: 20%;
border: 1px solid black;
margin:10px;
height: 50%;
border-radius:15px;
}
}
footer{
background: lightgrey;
margin-top:10px;
margin-bottom: 20px;
padding: 20px;
}
here Typo in div class name "wrap"
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
</style>
<body>
<div class="wrap">
<nav>
<ul class="nav nav-pills pull-right">
<li role="navigation" class="active">Home</li>
<li role="navigation">About Us</li>
<li role="navigation">Contact Us</li>
</ul>
<ul class="nav nav-pills pull-left">
<li role="menu" class="omer">omer</li>
</ul>
<div class="icon-menu">
<span class="glyphicon glyphicon-list"><text>Menu<text></span>
</div>
</div>
</nav>
<header></header>
<div class="main" id="grad"><h1>Welcome to ducati</h1>
<div class="row">
<div class="col-md-2 box" id="box1">
<span class="glyphicon glyphicon-headphones"></span>
<p>Lorem ipsum</p>
</div>
<div class="col-md-2 box" id="box2">
<span class="glyphicon glyphicon-music"></span>
<p>Lorem ipsum</p>
</div>
<div class="col-md-2 box" id="box3">
<span class="glyphicon glyphicon-download-alt"></span>
<p>Lorem ipsum</p>
</div>
<div class="col-md-2 box" id="box4">
<span class="glyphicon glyphicon-shopping-cart"></span>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<footer> © All right belong to me :)</footer>
</div>
<script>
$(document).ready(function(){
$('.omer').click(function() {
console.log('here');
$('.wrap').animate({
left: "285px"
}, 200);
});
});
</script>
</body>
</html>