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>
Related
Hey friends whats up............!
I am building this website using bootstrap 5 and I do have a navbar toggler on it........!
Its working fine but I do want it do fill the full width of screen when toggled.........!
Tried some stuff but could not do it. Here is my code. I appreciate any help................!
/***** Top menu *****/
.navbar {
background: #000;
transition: all .6s;
backface-visibility: hidden;
height: 88px;
}
.navbar.navbar-no-bg {
background: rgba(0, 0, 0);
}
.navbar-dark .navbar-nav {
font-size: 15px;
color: #fff;
font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
color: rgba(255, 255, 255, 1);
border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
outline: 0;
}
.navbar-brand {
width: 136px;
background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
border: 0;
margin-left: 60px;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.navbar-nav {
background: rgba(0, 0, 0);
padding-top: 24px;
margin-right: 70px;
padding-bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
<!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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#top-content">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#about-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#portfolio">FAQ</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
You need to remove the container class OR move it up (in example) so it encapsulates all of your nav. Not sure where this came from, but it appears to be a design choice to have the collapse smaller. But this will fix it.
/***** Top menu *****/
.navbar {
background: #000;
transition: all .6s;
backface-visibility: hidden;
height: 88px;
}
.navbar.navbar-no-bg {
background: rgba(0, 0, 0);
}
.navbar-dark .navbar-nav {
font-size: 15px;
color: #fff;
font-weight: 600;
margin: 0 auto;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
color: rgba(255, 255, 255, 1);
border: 0;
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:focus {
color: #fff;
outline: 0;
}
.navbar-brand {
width: 136px;
background: url(/assets/imgs/logo_jpad.png) left center no-repeat;
border: 0;
margin-left: 60px;
text-indent: -99999px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.navbar-nav {
background: rgba(0, 0, 0);
padding-top: 24px;
margin-right: 70px;
padding-bottom: 24px;
left: 0;
right: 0;
text-align: center;
}
<!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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar fixed-top navbar-expand-lg navbar-no-bg navbar-dark">
<a class="navbar-brand" href="index.html">Bootstrap 5 One Page Website Tutorial</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#top-content">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#about-us">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#portfolio">FAQ</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-primary mb1 btn-jpad">Request a quote</button>
</li>
</ul>
</div>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
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>
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.
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'm looking for the best way to distribute the fa-icons evenly on the full width of the screen when the screen max width is 414 and hide the navbar-brand since when I use hidden-xs its hidden till 700pt and I want to hide it exactly on 414 and have even space between the Fa-icons
tab-icon {
display: inline-block;
margin-left: 15px;
margin-right: 150px;
vertical-align: middle;
list-style: none;
padding-right: 15px;
}
.tab-icon li {
margin-left: 2.5vw;
margin-right: 2.5vw;
}
.tab-icon li a{
color: #000;
margin-top: 50%;
#media screen and (max-width: 414px) {
.tab-icon li {
margin-left: 7.5vw;
margin-right: 7.5vh;
}
}
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar-header page-scroll">
<ul class="tab-icon pull-right list-inline hidden-lg">
<li><a class="fa fa-home fa-2x " href="#home"></a></li>
<li><a class="fa fa-handshake-o fa-2x" href="#service"></a></li>
<li><a class="fa fa-download fa-2x" href="#download"></a></li>
<li><a class="fa fa-car fa-2x" href="#chauffers"></a></li>
</ul>
<a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
</div>
Voila, you could do a flexbox like this. the only downside is you cant use Favicon icons, you have to use images, because images stretch, and fonts don't.
.tab-icon {
display: flex;
align-items: stretch;
flex-flow: row nowrap;
width: 500px;
list-style: none;
}
.tab-icon li {
flex-grow: 1;
}
.tab-icon li img{
width: 100%;
}
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar-header page-scroll">
<ul class="tab-icon pull-right list-inline hidden-lg">
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
<li><img src="https://image.freepik.com/free-icon/home_318-42210.jpg"/></li>
</ul>
<a class="navbar-brand page-scroll hidden-xs" href="#page-top">Logo</a>
</div>