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>
Related
How do I vertically stack and align icons with their respective text, and horizontally align them center? And make it all mobile-responsive?
My attempt
li {
margin: 0 90px;
display: inline;
}
.num {
margin: 0 150px;
display: inline;
}
ul {
list-style: none outside none;
margin: 0;
padding: 50;
text-align: center;
}
ul li i {
text-align: center;
}
<!-- script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<ul>
<li><i class="fas fa-phone">
</i>
</li>
<li><i class="fas fa-map">
</i>
</li>
<li><i class="fas fa-paper-plane">
</i>
</li>
</ul>
<ul class="num">
<li>Call (555)123-4567</li>
<li>Box 564, Disneyland</li>
<li> Email.com </li>
</ul>
I hope this what you are looking for.
ul {
display:flex;
}
ul li i{
padding:10px;
}
ul li {
display:flex;
flex:1;
padding:20px;
flex-direction:column;
text-align:center;
}
#media only screen and (max-width: 600px){
ul {
flex-direction:column;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<ul>
<li>
<i class="fas fa-phone"></i>
Call (555)123-4567
</li>
<li>
<i class="fas fa-map"> </i>
<span>Box 564, Disneyland<span>
</li>
<li>
<i class="fas fa-paper-plane"></i>
Email.com
</li>
</ul>
</body>
</html>
You can use a flexbox wrapper with flex-direction row which switches to column using a media query and you could use flexboxes with flex-direction column for each item.
#flexwrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.flexbox {
width: 120px;
margin: 20px;
display: flex;
align-items: center;
flex-direction: column;
font-family: sans-serif;
font-size: 10px;
}
a {
color: #569;
text-decoration: none;
}
i {
padding: 10px;
border-radius: 100%;
background: #569;
color: white;
}
#media only screen and (max-width: 480px){
#flexwrapper {
flex-direction: column;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="flexwrapper">
<div class="flexbox">
<p><i class="fas fa-phone"></i></p>
<p>Call (555)123-4567</p>
</div>
<div class="flexbox">
<p><i class="fas fa-map"></i></p>
<p>Box 564, Disneyland</p>
</div>
<div class="flexbox">
<p><i class="fas fa-paper-plane"></i></p>
<p> Email.com </p>
</div>
</div>
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'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.
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