fixed navbar
This commit is contained in:
3574
public/css/all.css
3574
public/css/all.css
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 336 KiB |
@@ -13,11 +13,11 @@
|
|||||||
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" type="text/css" />
|
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css" type="text/css" />
|
<link rel="stylesheet" href="%PUBLIC_URL%/css/animate.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" type="text/css" />
|
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="%PUBLIC_URL%/css/all.css" type="text/css" />
|
|
||||||
<link rel="stylesheet" href="%PUBLIC_URL%/css/jquery.bxslider.css" type="text/css" />
|
<link rel="stylesheet" href="%PUBLIC_URL%/css/jquery.bxslider.css" type="text/css" />
|
||||||
|
|
||||||
<!-- Font Google -->
|
<!-- Font Google -->
|
||||||
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ const Header: React.FC = () => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function setFixed() {
|
function setFixed() {
|
||||||
if (window.scrollY > 0) {
|
if (window.scrollY > 50) {
|
||||||
setFix(true);
|
setFix(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -19,9 +19,9 @@ const Header: React.FC = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="navbar navbar-expand-lg banner">
|
<nav className={fix ? "navbar navbar-expand-lg nav-scroll": "navbar navbar-expand-lg banner"}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<img src="../marketing/images/logo.png" alt="logo" width="160" height="80" />
|
<img src={fix ? "../marketing/images/logo-black.png" : "../marketing/images/logo.png"} alt="logo" width="160" height="80" />
|
||||||
<button
|
<button
|
||||||
className="navbar-toggler"
|
className="navbar-toggler"
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -71,6 +71,16 @@ h6 {
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.nav-scroll {
|
.nav-scroll {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
min-height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
background: transparent;
|
||||||
|
z-index: 9999999;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
|
-webkit-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
|
||||||
box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
|
box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.0509803922);
|
||||||
|
|||||||
Reference in New Issue
Block a user