How do I include a sidebar and a Navigation bar together using html,css and js - javascript

I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.


Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!


First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.

Related

mmenu plugin is not used in ASP.NET MVC Home\Index page

I want to use mmenu plugin on asp.net mvc at home \ index page. For this, I included the plugin in my adminLTE v.3 (bootstrap v4) themed project. But when the plugin works, it takes over the body and the menu starts working right inside the body. But where it should work is home \ index. What kind of setting should I make for this? I want help from those who use this plugin.
***UPDATED Paint drawn exactly what I want
my original AdminLTE template;
mispositioned mmenu;
original mmenu
The styles that mmenu creates inside the body of asp.net mvc
Home\Index.cshtml
#{
ViewBag.Title = "Index";
}
<link type="text/css" rel="stylesheet" href="~/mmenu/demo/css/demo.css" />
<link type="text/css" rel="stylesheet" href="~/mmenu/dist/mmenu.css" />
<div id="page">
<div class="header">
<span></span>
Demo
</div>
<div class="content">
<p>
<strong>This is a demo.</strong><br />
Click the menu icon to open the menu.
</p>
</div>
<nav id="menu">
<ul>
<li>Home</li>
<li>
<span>About us</span>
<ul>
<li>History</li>
<li>
<span>The team</span>
<ul>
<li>
Management
</li>
<li>
Sales
</li>
<li>
Development
</li>
</ul>
</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
<li class="Divider">Other demos</li>
<li>Advanced demo</li>
<li>One page demo</li>
</ul>
</nav>
</div>
#section Scripts
{<script type="text/javascript">
$(document).ready(function () {
const menu = new Mmenu(
document.querySelector('#menu')
);
});
</script>
}
<script src="~/mmenu/dist/mmenu.polyfills.js"></script>
<script src="~/mmenu/dist/mmenu.js"></script>
_Layout.cshtml
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>#ViewBag.Title - Merinos Tablet</title>
<!-- Font Awesome Icons -->
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
#Html.Partial("_Header")
#Html.Partial("_Sidebar")
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">#ViewBag.Title</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
#Html.ActionLink(#ViewContext.RouteData.Values["controller"].ToString(),
#ViewContext.RouteData.Values["action"].ToString(), #ViewContext.RouteData.Values["controller"])
</li>
#*#if (#ViewContext.RouteData.Values["controller"].ToString() != "Dashboard" ||
#ViewContext.RouteData.Values["action"].ToString() != "Dashboard")
{
}*#
<li class="breadcrumb-item active">#ViewBag.Title</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
#RenderBody()
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
#Html.Partial("_Footer")
#Html.Partial("_Aside")
</div>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/adminlte/js")
#RenderSection("scripts", required: false)
</body>
</html>
mmenu.demo.css
.header,
.content,
.footer {
text-align: center;
}
.header,
.footer {
background: #4bb5ef;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 44px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 0 50px;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
}
.footer.fixed {
position: fixed;
bottom: 0;
left: 0;
}
.header a {
display: block;
width: 28px;
height: 18px;
padding: 11px;
margin: 2px;
position: absolute;
top: 0;
left: 0;
}
.header a:before,
.header a:after {
content: '';
display: block;
background: #fff;
height: 2px;
}
.header a span {
background: #fff;
display: block;
height: 2px;
margin: 6px 0;
}
.content {
padding: 150px 50px 50px 50px;
}

How can I change text animations so that they just show up in their own space?

I was adding some animations with CSS to the site I was working on. But the overflow: hidden attribute doesn't seem to work the way I expected it should. Here's my code.
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
position: relative;
animation: firanim 1.5s ease-in-out;
overflow: hidden;
}
.sty2 {
position: relative;
animation: secanim 1s ease-in-out;
overflow: hidden;
}
#keyframes firanim {
from {top:-50px;}
to {top:0px;}
}
#keyframes secanim {
from {left:-55vw;}
to {left:0px;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>lorem ipsum</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="sty1">
<span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
<div class="sty2">
<span class="lead">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
So is there any additional class missing in my code or anything wrong I am using? Because I was expecting the span element with .lead class to just show in his own space not like some text flying over to the place from somewhere. I am hoping you'll get what i wanted to say.

You are animating the whole box (.sty1 and .sty2), the text (.lead) its not outside the (.sty1 and .sty2) thats why its not getting hidden by overflow: hidden
you need to keep the (.sty1 and .sty2) in thier place and animate .lead
try this
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
overflow: hidden;
}
.sty2 {
overflow: hidden;
}
.sty1 .lead {
position: relative;
animation: firanim 1.5s ease-in-out;
}
.sty2 .lead {
position: relative;
animation: secanim 1s ease-in-out;
}
#keyframes firanim {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes secanim {
from {
left: -55vw;
}
to {
left: 0px;
}
}

your animation it's set on the .leads container(.sty1 and .sty2), so that's the one that it's moving , your lead are moving along with it, to fix it you can wrap those in a div with a class that will have its overflow to hidden, like this
I added a animation-container and set overflow:hidden, see the updated html
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
position: relative;
animation: firanim 1.5s ease-in-out;
overflow: hidden;
}
.sty2 {
position: relative;
animation: secanim 1s ease-in-out;
overflow: hidden;
}
.animation-container {
overflow: hidden;
}
#keyframes firanim {
from {
top: -50px;
}
to {
top: 0px;
}
}
#keyframes secanim {
from {
left: -55vw;
}
to {
left: 0px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>Anurag Srivastava - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="animation-container">
<div class="sty1">
<span class="lead">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
</div>
<div class="sty2">
<span class="lead">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>

Try the following HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- EndCSS -->
<title>Anurag Srivastava - Portfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white sticky-top">
<a class="navbar-brand" href="#">Under Development</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavId">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Follow</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron justify-content-center">
<div class="text-monospace sty">
<h1 class="display-3">welcome<span class="text-danger">!</span></h1>
<div class="sty1">
<span class="lead_1">lorem ipsum lorem <span class="text-warning">LOREM IPSUM.</span></span>
</div>
<div class="sty2">
<span class="lead_2">lorem ipsum lorem ipsum lorem.</span>
</div>
</div>
</div>
<!-- JS -->
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- EndJS -->
</body>
</html>
And the following CSS
.jumbotron {
height: 100%;
height: 100vh;
align-items: center;
display: flex;
position: relative;
}
.sty {
display: inline-block;
position: relative;
}
.sty1 {
overflow: hidden;
}
.lead_1{
animation: firanim 1.5s ease-in-out;
position: relative;
}
.lead_2{
position: relative;
animation: secanim 1s ease-in-out;
}
.sty2 {
overflow: hidden;
}
#keyframes firanim {
from {top:-50px;}
to {top:0px;}
}
#keyframes secanim {
from {left:-55vw;}
to {left:0px;}
}
Hope it helps! :)

Trying to make nav bar hidden when in mobile view

My navbar currently appears like this when I inspect and put it to a mobile device such as iPhone X:
However, I want it to appear like this when in mobile:
... and for the bar to open up as it does when the button is clicked.
To get it looking like I want, I use display:none in CSS however this then means when you click the button to display it nothing appears. My HTML and CSS is as follows:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Toggles the nav bar
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
//animates the links
navLinks.forEach((link, index) => {
if (link.getElementsByClassName.animation) {
link.style.animation = ``;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index /7 + 0.5}s`;
}
});
//burger animation
burger.classList.toggle('toggle');
});
}
navSlide();
#media screen and (max-width:640px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
display: none;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
transition: transform 0.5s ease-in;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Lewis Haddon">
<title>Business website</title>
<link rel="stylesheet" href="./css/test2.css" type="text/css">
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>S3</li>
<li>RS6</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>

Use visibility: hidden; as CSS.
You can use the #media query to detect whether the client is in used in a mobile environment.
#media screen and (max-width: 500px) {
#navID { visibility: hidden; }
}

Add this code in your css, you can change the pixel from 320 to 350 or 300 for mobile view
#media(max-width: 320px) {
nav{
display: none;
}
}

Use this for toggler on the right:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Try to insert your html and jQuery and not css in the above code.
This would be much easier :-)

You could add overflow: hidden
and width: 100% on your nav.
Also you can set position: absolute and right: -50% (as your links’ container width is set to 50%). This should work without hidden overflow

Can't put anything over particles.js

So I'm working on my site, and I want to incorporate the cool line particle from the particles.js library. I have the particles working and such it all works fine. When I try to put my text onto it, it forces it below all the particles. I don't know why this is happening. I've tried putting it above, below and inside of the tags, but it all ways ends up above or below the particles, or no where at all.
Here is my code:
/* =============================================================================
HTML5 CSS Reset Minified - Eric Meyer
========================================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}
/* =============================================================================
My CSS
========================================================================== */
/* ---- base ---- */
html,body{
background:#111;
}
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{
font:normal 75% Arial, Helvetica, sans-serif;
}
canvas{
display:block;
vertical-align:bottom;
}
/* ---- stats.js ---- */
.count-particles{
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles{
font-size: 1.1em;
}
#stats,
.count-particles{
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats{
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles{
border-radius: 0 0 3px 3px;
}
/* ---- particles.js container ---- */
#particles-js{
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-color: darkcyan;
}
#particles canvas{
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT TOUCH -->
<meta charset="utf-8">
<title>C#Web - Professional Web Development</title>
<meta name="description" content="C#Web is a web development & graphic design shop run by Gosintary and Lorsharish. They charge low prices and provide very high quality work!">
<meta name="author" content="Ethan Pszanowski" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css">
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- END OF DO NOT TOUCH -->
<!-- START OF CSS -->
<style>
.header{
height: 650px;
width: 100%;
font-family: 'Montserrat', sans-serif;
color: white;
margin-top: 104px;
}
.header p{
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary fixed-top text-uppercase" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">C# WEB</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#ethan">Portfolio</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<div class="layer">
<div id="particles-js"></div>
</div>
<div class="header">
<h1>123</h1>
</div>
<!-- DO NOT TOUCH -->
<!-- scripts -->
<script src="particles.js"></script>
<script src="js/app.js"></script>
<!-- END OF DO NOT TOUCH -->
</body>
</html>
So what am I doing wrong?

I know this is long overdue, but I was having the same issue and added
"position: relative;"
to the containing my content (e.g. the element I wanted to display over the particles background ).
This worked for me! Hope someone else might find this solution useful.

Change div to same position on resize the window

On responsive menu bar I have close and open menu when page is less than 1120px. When I click on the close width of the primary-nav turn to 0 px.
and not coming to its previous size on page resizing.
The html and css code are as given below.
.primary-nav li a{
color:black;
font-size:15px;
font-family:sans-serif;
}
.primary-nav .clickhere a{
font-weight:bold;
color:red;
}
header a img{
padding:10px;
}
.opennav{
display:none;
}
.primary-nav{
width:80%;
}
#media only screen and (max-width: 1100px) {
.primary-nav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 5px;
right: -0%;
background-color: #111;
overflow-x: hidden;
transition: .5s;
}
.primary-nav li .closenav{
color:white;
width:250px;
text-align:right;
padding-right:40px;
margin-top:10px;
cursor: default;
}
.primary-nav li a{
width:220px;
color:wheat;
}
.opennav{
display:block;
position:fixed;
left:91.3%;
top:-1%;
}
}
<!doctype html>
<html>
<head>
<title>bloodropes</title>
<!--[if IE]><script src="jquery-1.7.2.min.js"></script><![endif]-->
<meta name="title" content="Bloodropes | Homepage" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="/stylesheet/home.css" rel="stylesheet" type="text/css">
<script>
function openNav() {
document.getElementById("primary-nav").style.width = "250px";
}
function closeNav() {
document.getElementById("primary-nav").style.width = "0px";
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<header>
<a href="/">
<img src="https://www.google.co.in/logos/doodles/2017/indias-independence-day-2017-6586914957164544-s.png" alt="bloodropes">
</a>
</header>
</div>
<div class="col-md-10">
<h1 onclick="openNav()" class="opennav">☰</h1>
<nav class="navbar">
<ul class="nav navbar-nav primary-nav " id="primary-nav" >
<li>
<h1 onclick="closeNav()" class="closenav">☰</h1>
</li>
<li>
Giving blood
</li>
<li>
about blood
</li>
<li>
Amazing stories
</li>
<li>
News
</li>
<li>
Contact us
</li>
<li>
About us
</li>
<li class="clickhere">
click here to give Blood
</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
I want to change to width of primary as it was before the click on close.

You could look at using jQuery, and using the resize function to check if the browser is below 1120px, something similar to...
$(document).ready(function(){
$(window).on("load resize",function(e){
docWidth = $( document ).width();
if(docWidth >= 1120) {
$( "#primary-nav").removeClass("mobile").addClass("desktop"); //set some CSS to 'desktop' class which controls desktop style
}
else {
$( "#primary-nav").removeClass("desktop").addClass("mobile"); //set some CSS to 'mobile' class which controls mobile style
}
});
});

Categories

Resources