I have a sidenav using a <ul> tag. How to make sidenav show scrollbar auto?
An Example of what my sidenav looks like
html:
<section class="sticky-top">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<li class="nav-item">
<a class="nav-link" href="#">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Test 2 </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Test 3</a>
</li>
</ul>
</section>
css:
.nav {
position: absolute;
z-index : 3;
}
.navbar {
z-index : 3;
background-color: var(--white);
}
When I applied the sidebar styling by enclosing the <ul> element in a <div> element, I got the desired result. Hovering the sidebar (when the hover event occurs) opens the scrollbar.
<div class="sidebar">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<!-- sidebar items -->
</ul>
</div>
.sidebar{
position: fixed;
top: 0;
bottom: 0;
background: #6C757D;
width: 140px;
}
.sidebar:hover{
overflow-y: auto
}
The executable snippet is available below. The overflow-y: auto; style comment line defined in the .sidebar:hover block has been made to automatically display the scrollbar; Added overflow-y: auto; style to .sidebar block.
.sidebar {
position: fixed;
top: 0;
bottom: 0;
background: #6C757D;
width: 140px;
overflow-y: auto;
}
.sidebar:hover {
/* overflow-y: auto */
}
.nav {
position: absolute;
z-index: 3;
}
.navbar {
z-index: 3;
background-color: var(--white);
}
.nav-link {
color: #ffffff;
font-size: 12px;
&:hover {
transition: color 0.4s ease-in;
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
}
&.active {
background-color: #007bff;
}
}
<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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section class="sticky-top">
<div class="sidebar">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
</ul>
</div>
</section>
</body>
Related
My sidebar didnt fill entire column from bootstrap. i didnt define the width for the sidebar
here is my css for sidebar
.sidebar {
position: fixed;
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */ /* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
my html looks like this
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
<li class="nav-item mb-2">
<a class="nav-link active" href="#">
<img src="img/sidebar/home.svg" class="mr-3 icon-sidebar" alt="">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/check-circle.svg" class="mr-3 icon-sidebar" alt="">
Goal
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/clipboard.svg" class="mr-3 icon-sidebar" alt="">
To Do
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/calendar.svg" class="mr-3 icon-sidebar" alt="">
Kalender
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
currently im using bootstrap 4.6 version.
and here is my full code in github:
for css
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/assets/css/sidebar.css
for the sidebar
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/partials/sidebar.ejs
for the full html
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/goal.ejs
update :
i remove position:fixed and change it to height :100%
but when i scroll now my side bar content will scroll too.
i am using nodejs, express js, and for the view engine i use ejs.
thank you before
Can you please check the below code? Hope it will work for you. We have remove position: fixed form sidebar and add row element in parents of col-*
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.sidebar {
/* position: fixed; */
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */
/* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
<li class="nav-item mb-2">
<a class="nav-link active" href="#">
<img src="img/sidebar/home.svg" class="mr-3 icon-sidebar" alt=""> Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/check-circle.svg" class="mr-3 icon-sidebar" alt=""> Goal
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/clipboard.svg" class="mr-3 icon-sidebar" alt=""> To Do
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/calendar.svg" class="mr-3 icon-sidebar" alt=""> Kalender
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
</body>
</html>
I am trying to get the Navbar links inside my navbar and they are showing up under it. I am not sure what happened but I am using a flexbox because it is a requirement for the project I am working on but it moved my nav links and I am not sure why
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
height: 40px;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
The magic of flex is that it scales to the size it needs, so usually hardcoding height and width are counter purpose to the usage of flex. removing the hardcoded height fixed the issue for me
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Your navbar ist simply cut off. I removed the height and now its showing correctly.
.mynav {
border: 5px solid black;
position: absolute;
margin-top: 550px;
background-color: #fbc616;
width: 100%;
}
.navbar ul {
display: flex;
list-style: none;
font-size: 150%;
font-family: RockSalt-Regular;
}
.navbar li {
flex: 3;
}
<div class="mynav">
<nav class="navbar navbar-expand navbar-dark bg-primary">
<div class="navbar-collapse collapse">
<ul class="navbar-nav pt-1">
<li class="nav-item active">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
#font-face {
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar {
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active {
position: relative;
}
.nav-item.active::before {
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before,
.navbar::after {
height: 6px;
width: 3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom: -6px;
background: #14fe17;
}
.navbar::before {
left: 0px
}
.navbar::after {
right: 0px;
}
.navbar-nav {
width: 100%;
}
body {
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem;
}
body::after {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
z-index: 100000000;
pointer-events: none;
}
h2 {
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img {
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav>li.nav-item>a.nav-link,
ul.nav>li.nav-item>a.nav-link,
div.tab-content {
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<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">
STATUS
</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">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class="center-image">
<img src="vb.png">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
#font-face{
font-family: Pipboy;
src: url('../monofonto.ttf');
}
.navbar{
border-bottom: 2px solid;
margin: 0px 10px;
color: #14fe17;
}
.nav-item.active{
position: relative;
}
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
.navbar::before, .navbar::after{
height:6px;
width:3px;
content: "";
position: absolute;
display: block;
z-index: 5000;
bottom:-6px;
background: #14fe17;
}
.navbar::before{
left:0px
}
.navbar::after{
right:0px;
}
.navbar-nav{
width: 100%;
}
body{
font-family: Pipboy, sans-serif;
background-color: #151811;
font-size: 1.5rem ;
}
body::after{
width: 100%;
height:100%;
content: "";
position: absolute;
top:0px;
left: 0px;
background: repeating-linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px );
z-index: 100000000;
pointer-events:none;
}
h2{
margin-top: 20px;
margin-left: 20px;
color: #14fe17;
}
.center-image img{
margin: auto;
margin-top: 100px;
display: block;
position: relative;
max-height: 600px;
max-width: 300px;
filter: grayscale(1) sepia(100%) hue-rotate(55deg) saturate(7) brightness(1) contrast(2);
}
ul.navbar-nav > li.nav-item > a.nav-link ,
ul.nav > li.nav-item > a.nav-link, div.tab-content{
color: #14fe17 !important;
}
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>
Hercules Strydom
</title>
</head>
<body>
<h2>
Hercules Strydom
</h2>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
<div class= "container">
<div class="row">
<div class="col-12">
<!-- Nav tabs -->
<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">
STATUS
</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">
SPECIAL
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">
PERKS
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
status
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
special
</div>
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">
perks
</div>
</div>
</div>
</div>
</div>
<div class= "center-image">
<img src="vb.png">
</div>
</body>
<script src= "https://code.jquery.com/jquery-3.3.1.js"></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src= "js/main.js"></script>
</html>
I am trying to design my personal web-page with a Fallout 4 pipboy style. I am running into an error whereby I want to edit the lines on the ::before and ::after under the navbar to look more like a pipboy. The red you see on the picture is me trying to debug why the nav-item activebegins midway through the first item (Home) and extends all the way to the end of the page. Shouldn't it be just the length of the active item? I have posted my code regarding this issue below.
Any advice is appreciated!
.nav-item.active::before{
content: "";
position: absolute;
background: #f00;
width: 100%;
height: 20px;
}
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav nav-fill">
<li class="nav-item active ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Travel</a>
</li>
</ul>
</div>
</nav>
I've been struggling with one problem related to displaying a logo when a sticky header is activated. The menu I've accomplished so far works as intended, but I need to display the logo in a small version as soon the header becomes sticky and keep the options centered. Below what I've got:
And I need something like this as soon as the div becomes sticky:
Here's my code so far:
.navbar {
background-color: #fff !important;
}
.navbar .navbar-nav li a {
color: #b29b72 !important;
}
.navbar .navbar-brand {
color: #b29b72 !important;
}
.navbar .navbar-brand:hover {
color: #b29b72 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* HOMEPAGE *****************************************************/
.video-container {
padding-right: 0px;
padding-left: 0px;
}
#splash {
position: relative;
text-align: center;
height: 300px;
background-color: #878787;
}
#splash .video {
position: relative;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-bottom: 1px solid #eee;
}
#splash .opaque {
opacity: 0.4;
background-color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-options {
padding-top: 12px;
}
.menu-options a {
color: #b29b72;
font-weight: 600;
font-size: 20px;
}
#menu-row {
height: 50px;
background-color: #000000 !important;
}
.menu-options ul {
margin: 0;
padding: 0;
}
.menu-options ul li {
display: inline-block;
width: 120px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Fantastic Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item">
<a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
</li>
<button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="menu-row" class="sticky-top">
<div class="container">
<div class="row">
<div class="col-12 menu-options text-center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</li>
<li>OPTION 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid video-container">
<div id="splash">
<div class="video">
<video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
<source src="" type="video/mp4">
<source src="" type="video/webm">
</video>
<div class="opaque"></div>
</div>
</div>
<div class="container">
<div class="row" style="height: 100vh;">
<div class="col-12">
</div>
</div>
</div>
</div>
</body>
</html>
You'll need two logos (large - standard. Small - scroll / navigation). Then do the following add the following JQuery to your code, but make sure you use the specific class names (not the ones I've used in my example).
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>
I am trying to create a responsive navbar for mobile, but I am having trouble getting the link containers to resize properly. I also cannot seem to get the text to center itself vertically. I have tried using auto padding and margins in both cases, but they don't seem to be doing anything. I am using Bootstrap.
My questions are:
How do I center the text vertically within its container?
How do I get the width of each link's container to be the width of the text
How do I then get the spacing between each container to be the same, so that all together they fill the width of the screen?
HTML
<div class="container" id="nav-container-mobile">
<ul class="list-unstyled list-inline text-center d-flex" id="nav-list-mobile">
<li class="list-inline-item text-center nav-link-horizontal" id="nav-profile-link-mobile">
<a class="nav-link" href="#Profile">
<div class="nav-link-container-mobile">Profile</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-experience-link-mobile">
<a class="nav-link" href="#Experience">
<div class="nav-link-container-mobile">Experience</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-skills-link-mobile">
<a class="nav-link" href="#Skills">
<div class="nav-link-container-mobile">Skills</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-project-link-mobile">
<a class="nav-link" href="#project">
<div class="nav-link-container-mobile">Projects</div>
</a>
</li>
<li class="list-inline-item text-center nav-link-horizontal" id="nav-contact-link-mobile">
<a class="nav-link" href="#Contact">
<div class="nav-link-container-mobile">Contact</div>
</a>
</li>
</ul>
</div>
CSS
#nav-container-mobile {
position: absolute;
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
#nav-list-mobile {
width: 100%;
height: 100%;
margin: 0;
vertical-align: middle;
}
.nav-link-horizontal {
height: 100%;
width: 15vw;
min-width: 50px;
}
.nav-link-container-mobile {
padding: auto;
height: 100%;
overflow-wrap: break-word;
}
.nav-link {
color: #aeaeae;
}
Any help or advice is appreciated.
JSFiddle
It would be simpler to use the Bootstrap 4 Nav Fill or Justify, and then just change the background color and other styles as needed.
https://www.codeply.com/go/WsWHHIfRlh
<div class="navbar navbar-expand navbar-dark" id="nav-container-mobile">
<div class="container-fluid">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
#nav-container-mobile {
width: 100%;
height: 70px;
padding: 0;
background: #292929;
z-index: 5;
}
.nav-link {
color: #aeaeae;
}