Develop Reference

Text not getting center aligned in button

I am very new to css and i am trying to align the text center in the button, but i am not able to get it centered. Please look into my code and help me to fix it.
.new-btn{
clear:both;
white-space:nowrap;
display: inline-block;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn > i{
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
text-align: center; is also not working. I have been trying to fix this for hours but still no luck. The result look like this

span is an inline element, so you need to set it to inline-block, then set its width and finaly text-align:center
p/s: research about flex. it will make your life easier

did some changes to your css instead of inline block i used flex and for the span it takes the width of 100% and reduced double the size of red circle width it also has display f;ex in it to justify the text to the center
.new-btn {
clear: both;
white-space: nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: flex-start;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
}
.new-btn>span,
.new-icn>i {
float: left;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
line-height: 1em
}
.new-icn>i {
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn>span {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
display: flex;
justify-content: center;
width: calc(100% - 120px);
}
.new-yt>i {
background: #ff0000;
}
.new-yt>span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>

Altered the code a bit, making the outside container a flex and centring the text as a span.
using the ::before treatment for the red circle element it is absolutely positioned and will ignore the 'Youtube' text
.new-btn{
clear:both;
position:relative;
white-space:nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn::before{
content:"";
display:inline-block;
position:absolute;
left:0;
top:0;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
background-color: #ff0000;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
.text{
display:flex;
}
<a class="new-btn new-icn new-yt" href="#"><span class="text">Youtube</span></a>

Cannot click buttons in modal

I have a modal created with the following CSS. But when I open it up, it appears and allows me to fill out the form fields but clicking on the buttons (they have onclick events) does absolutely nothing - I tried making the buttons simple links which open new pages, but they don't do tat either. I am doing this within a SquareSpace page. I hope that doesn't complicate things.
<style>
.info-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: visible;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.info-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 400px;
border-radius: 0.5rem;
}
.info-continue-button {
background-color: #0069d9;
border-color: #0062cc;
position: relative;
width: 100px;
font-family: "Oxygen", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
.info-continue-button:hover {
color: #fff;
}
.info-show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.info-field {
color: inherit;
font: inherit;
margin: 0;
line-height: normal;
margin-bottom: 15px;
background-color: #fff;
border-radius: 0;
-webkit-appearance: none;
box-shadow: none;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
width: 100%;
max-width: 400px;
height: 32px;
border: 0;
border-bottom: 2px solid #d1d1d1;
padding: 8px 0;
border-bottom-color: #2d56bb;
}
.info-modal button {
font: inherit;
margin: 0;
overflow: visible;
-webkit-appearance: button;
font-family: "Adamina", Georgia, serif;
display: inline-block;
height: 40px;
text-align: center;
font-size: 12px;
line-height: 38px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
color:#000;
outline: 0;
padding: 0 30px !important;
background-color: #e0e0e0;
border: 0;
font-weight: 700;
}
.info-modal button:hover {
color: #01855e;
}
.info-modal button[type='submit'].-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}
.info-modal p {
margin-bottom:0px;
}
</style>

How to set underline on hover on navigation links on responsive menu?

I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.
Here's the site, or you can refer to the below snippet.
Any help is appreciated.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div, and pass it the property of display:block
this is the example using that I said
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
<ul class="navbar" id="myNavbar">
i
<li>About</li>
<li>Lindsay</li>
<li>Branding</li>
<li>Photography</li>
<li>Instagram</li>
</ul>

Are you expecting like this
Temporary Solution
I have just added nth-child and given scaling for each link.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
height: 2px;
width:100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:nth-child(1):before {
visibility: visible;
-webkit-transform: scaleX(.18);
transform: scaleX(.18);
}
.navbar.responsive a:hover:nth-child(2):before {
visibility: visible;
-webkit-transform: scaleX(.22);
transform: scaleX(.22);
}
.navbar.responsive a:hover:nth-child(3):before {
visibility: visible;
-webkit-transform: scaleX(.25);
transform: scaleX(.25);
}
.navbar.responsive a:hover:nth-child(4):before {
visibility: visible;
-webkit-transform: scaleX(.33);
transform: scaleX(.33);
}
.navbar.responsive a:hover:nth-child(5):before {
visibility: visible;
-webkit-transform: scaleX(.26);
transform: scaleX(.26);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

Swipe sidebar menu doesn't work in chrome

i did the menu from that template
https://www.jqueryscript.net/menu/Touch-Swipeable-Sidebar-Menu-with-jQuery-CSS3.html
but it work only in firefox/edge/safari(ios). and doesn't work in chrome/opera and other browsers
as i see in debug (F12) menu in chrome, after swipe js add "open-sidebar" class but menu didn't appear on the screen
what i did wrong?
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { left: 240px; }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>
By the way, when i was forming my snippet for i've found my mistake.
.container{
position:sticky;
}
I don't know why that works in firefox/edge/safari and pre-installed browser on my few android phones.

Use transfrom:
$(window).ready(function(){
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
#media screen and (min-width: 320px) and (max-width: 700px)
{
body,
html {
height: 100%;
margin: 0;
overflow: auto;
font-family: helvetica;
font-weight: 100;
}
.container {
padding-left:0px;
position: fixed;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: transform 0.4s ease-in-out;
-moz-transition: transform 0.4s ease-in-out;
-ms-transition: transform 0.4s ease-in-out;
-o-transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
}
.container{
position:sticky;
}
.container.open-sidebar { transform: translate(240px, 0); }
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar::-webkit-scrollbar {
height: 0;
width: 0;
display: none;
}
#sidebar::-moz-scrollbar {
display: none;
}
#sidebar {
overflow-y: auto;
/*background: #e0e0e0;*/
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style-type: square;
}
#sidebar ul li { margin: 0; }
#sidebar ul li a {
padding: 15px 20px;
font-size: 16px;
font-weight: 100;
color: #333;
text-decoration: none;
display: block;
border-bottom: 1px solid #C922;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
-o-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;
}
.main-content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
.main-content .content {
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: auto;
padding-left: 60px;
width: 100%;
}
.main-content .content h1 { font-weight: 100; }
.main-content .content p {
width: 100%;
line-height: 160%;
}
.main-content #sidebar-toggle {
background: orange;
border-radius: 3px;
display: block;
position: relative;
padding: 10px 7px;
float: left;
}
.main-content #sidebar-toggle .bar {
display: block;
width: 18px;
margin-bottom: 3px;
height: 2px;
background-color: #fff;
border-radius: 1px;
}
.main-content #sidebar-toggle .bar:last-child { margin-bottom: 0; }
#sidebar-overlay {
display: none;
position: fixed;
//background: #fff;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 0;
top: 0;
left: 0;
}
.ul_menu, #sidebar {
margin: 0;
padding: 0;
}
.sub-nav{
display:none;
}
#sidebar .dropdown:hover { background: orange; }
#sidebar .dropdown .sub-nav {
list-style: none;
font-style: italic;
background: #fff;
margin: 0;
padding: 0 20px;
}
#sidebar .dropdown .sub-nav li:not(:last-child) {
border-bottom: 1px solid #efefef;
}
#sidebar .dropdown .sub-nav li a {
text-decoration: none;
color: black;
font-size: 14px;
display: block;
}
#sidebar .dropdown .sub-nav li a:hover { background: orange; }
#sidebar .dropdown .sub-nav li:first-child {
padding-top:1px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div class="container">
<div id="sidebar" class="topmenu" class="col-sm-12">
<ul id="menu-line" >
<li class="dropdown">
Об <span class="caret" ></span>
<ul class="sub-nav" class="col-sm-12">
<li></li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<div class="content">
<h1><===swipe here.</h1>
<h1>... Main Content ...</h1>
</div>
</div>

Js var, not defined [duplicate]

This question already has an answer here:
jQuery TypeError: $ is undefined
(1 answer)
Closed 5 years ago.
Hi guys for some reason this variable wont work on my file. I have a picture, and when the user hovers over it, its suppose to bring up a swipe box with some information about the pic. However the box wont appear for some reason.
HTML/JS:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript">
var modal = $('.modal');
modal.hover(function() {
$(this).toggleClass('open');
});
alsolike(
"qEybdR", "Checkbox Radial Wash",
"dPdoNp", "Google Messenger Icon Button",
"BJAjF", "Masonry Multi Column Grid"
);
</script>
</head>
<body>
<a class="drib" href="http://drbl.in/okRS">View it on Dribbble <i class="fa fa-dribbble"></i></a>
<div class="modal">
<div class="image-container"></div>
<div class="content">
<div class="wrapper">
<div class="category">First Drive Review</div>
<h2>2015 Dodge Challenger SRT Hellcat</h2>
<h4>Andy Wendler <span>from</span> July 2014</h4>
<div class="line"></div>
<p>Make room, Beelzebub, there’s a new demon-prince pony car in town, and it’s from the people who once brought you a real Demon. Known in this mortal realm as the Dodge Challenger SRT Hellcat...</p>Read More <i class="fa fa-caret-right"></i>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.modal {
width: 600px;
height: 400px;
margin: 50px auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .image-container {
background: url("http://media.caranddriver.com/images/14q3/612022/2015-dodge-challenger-srt-hellcat-first-drive-review-car-and-driver-photo-615298-s-original.jpg");
background-size: cover;
background-position: center center;
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .content {
width: 40%;
height: 100%;
position: absolute;
right: -40%;
top: 0;
background: white;
box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .wrapper {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
}
.modal .wrapper h2 {
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
font-size: 26px;
line-height: 32px;
margin: 8px 0 10px 20px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.modal .wrapper h4 {
text-transform: uppercase;
color: #999;
font-size: 12px;
position: relative;
top: 4px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.modal .wrapper h4 span {
text-transform: none;
font-style: italic;
font-family: "Georgia", serif;
}
.modal .wrapper .category {
background: #333;
padding: 7px 15px;
display: inline-block;
color: white;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
font-weight: 500;
position: absolute;
top: -24px;
left: 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper .line {
width: 50px;
height: 2px;
opacity: 0;
background: #E3000C;
margin: 16px 0 14px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.modal .wrapper p {
font-size: 14px;
line-height: 24px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper p span {
text-transform: uppercase;
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.5px;
}
.modal .wrapper a {
display: block;
text-align: right;
text-decoration: none;
font-style: italic;
font-size: 12px;
color: #999;
font-family: "Georgia", serif;
margin-top: 12px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 0;
}
.modal .wrapper a i.fa {
-webkit-transition: all 0.2s;
transition: all 0.2s;
margin-left: 2px;
color: #E3000C;
}
.modal .wrapper a:hover {
color: #E3000C;
}
.modal .wrapper a:hover i.fa {
margin-left: 12px;
}
.modal.open .image-container {
width: 60%;
}
.modal.open .content {
right: 0;
}
.modal.open .content .category {
top: 0;
}
.modal.open .content h2 {
opacity: 1;
margin-left: 0;
}
.modal.open .content h4 {
top: 0;
opacity: 1;
}
.modal.open .content .line {
width: 90px;
opacity: 1;
}
.modal.open .content p {
opacity: 1;
}
.modal.open .content a {
opacity: 1;
}
.trigger {
position: absolute;
top: 24px;
right: 24px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #333;
}
* {
box-sizing: border-box;
}
.drib {
text-align: center;
display: block;
margin-top: 20px;
color: #fff;
}
.drib .fa {
color: #ea4c89;
}
body {
background: #777;
font-family: "Lato", sans-serif;
}
Thanks for the help

You can't use jquery until you have included jquery, ie:
<script type="text/javascript">
var modal = $('.modal');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
must be:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var modal = $('.modal');
</script>
there's still some debate as to the best place to put these (in the <head> (so available to the page) or just before </body> (so the content loads quicker)) as long as they are in the correct order.