I have a simple react app which displays my navbar, but whenever i do its position fixed; it stays at top but the content does not hide behind.
My navbar:
class Nav extends Component {
render() {
return (
<div>
<header className="toolbar">
<nav className="toolbar__navigation">
<div className="toolbar__toggle-button">
<DrawerButton drawer={this.props.drawer} click={this.props.drawerClickHandler} />
</div>
<img className="Nav__Logo-A" src={Mylogo} alt=""/>
<div className="toolbar__logo">Akcosh</div>
<div className="spacer"></div>
<div className="toolbar_navigation-items">
<ul>
<li>Software</li>
<li>About</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
</div>
)
}
}
my css:
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
}
.toolbar__logo{
margin-left: 1rem;
}
.toolbar__navigation {
display: flex;
align-items: center;
height: 100%;
padding: 0 1rem;
}
.toolbar__logo a{
color: #282828;;
text-decoration: none;
font-size: 1.5rem;
}
.spacer{
flex: 1;
}
.toolbar_navigation-items ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.toolbar_navigation-items li{
padding: 0 0.5rem;
}
.toolbar_navigation-items a{
color: white;
text-decoration: none;
}
.toolbar_navigation-items a:hover,
.toolbar_navigation-items a:active{
color: aqua;
}
#media(max-width: 768px){
.toolbar_navigation-items{
display: none;
}
.toolbar{
height: 68px;
border-bottom: 1px solid #aca4a4;
background-color: #e5e3e30a;
}
.toolbar__logo a{
font-family: Roboto,Helvetica,sans-serif;
letter-spacing: 1.6px;
font-size: 20px;
margin-left: 5px;
font-weight: 400;
}
.Nav__Logo-A{
animation-name: out;
position: absolute;
height: 210%;
width:100%;
left: -36%;
margin-top: 9px;
transition: .4s all;
}
.Nav__Logo-A:hover{
cursor: default;
transform: rotate(360deg);
left: -36%;
margin-top: 10px;
}
}
}
I have tried everything but nothing is working; i want my navbar fixed on top and content behind it, if i have some other component below the Nav component, i want its content/text to go behind nav because it is fixed at top
try to modify the z-index so it can stay on top
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:2; // or some bigger value
}
One thing you can try is setting the z indexes!
.toolbar{
width: 100%;
position: fixed;
background-color: #212121;
top: 0;
left: 0;
height: 45px;
z-index:99;
}
And then after that, if your content is still displaying in front of the navbar, go into that items CSS class and add
.exampleClass {
z-index:-1;
}
Related
I have a hamburger menu inside my website and if I go inside a specific which I have a card with some other elements inside. But if I open the menu while I'm inside the page with this card element the card goes above the menu for some reason. I tried almost everything but I can't get it right. I can't see where is my mistake with the CSS code...
My react component (html):
import TopNavBarMobileComponent from "../TopNavMobileComponent";
import github_icon from '../../assets/github_icon.png'
import instagram_icon from '../../assets/instagram_icon.png'
import my_picture from '../../assets/my_picture.jpg'
import '../../css-mobile/AboutMeStyle.css'
function AboutMeMobile() {
return (
<div>
<TopNavBarMobileComponent />
<div className="info-card-container">
<aside class="profile-card">
<div class="mask-shadow"></div>
<header>
<a href="https://github.com/georgesepetadelis/">
<img src={my_picture} />
</a>
<h1 className="name">GEORGE SEPETADELIS</h1>
<h2>Software engineer</h2>
</header>
<div class="profile-bio">
<p>16 y/o and I'm from Greece. I have experience with many programming languages and Frameworks for all mobile platforms like Flutter, React-Native and also native Android and iOS development with Java and Swift. Also I am currently working on Unreal engine and Unity for some big projects. </p>
</div>
<ul class="profile-social-links">
<li>
<a href="https://github.com/georgesepetadelis/">
<img src={github_icon} />
</a>
</li>
<li>
<a href="https://www.instagram.com/sepetadelhsss/">
<img src={instagram_icon} />
</a>
</li>
<li>
<a href="https://twitter.com/gsepetadelis">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg" />
</a>
</li>
</ul>
</aside>
</div>
</div>
)
}
export default AboutMeMobile;
My css file:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,800italic,400,600,700,800);
img {
max-width: 100%;
}
.name {
margin-top: 7%;
}
.info-card-container {
z-index: 1;
margin-top: 15%;
width: 100%;
position: absolute;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.profile-card {
position: relative;
width: 90%;
margin-top: 8%;
padding: 40px 30px 30px;
background: #fff;
border: 5px solid rgba(255,255,255,.7);
text-align: center;
border-radius: 8px;
transition: all 200ms ease;
}
.mask-shadow {
z-index: -1 !important;
width: 95%;
height: 12px;
background: #000;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
border-radius: 4px;
opacity: 0;
border-radius: 80px;
transition: all 400ms ease-in;
}
.mask-shadow {
opacity: 1;
box-shadow: 0px 30px 60px -5px rgba(55,55,71,0.3);
position: absolute;
}
.profile-card header {
display: block;
margin-bottom: 10px;
}
.profile-card header a {
width: 150px;
height: 150px;
display: block;
border-radius: 100%;
margin: -120px auto 0;
box-shadow: 0 0 0 5px #3300ff;
}
.profile-card header a img {
border-radius: 50%;
width: 150px;
height: 150px;
}
.profile-card header h1 {
font-size: 20px;
color: #444;
text-transform: uppercase;
margin-bottom: 5px;
}
.profile-card header h2 {
font-size: 14px;
color: #acacac;
text-transform: uppercase;
margin: 0;
}
.profile-bio {
font-size: 14px;
color:#a5a5a5;
line-height: 1.7;
font-style: italic;
margin-bottom: 30px;
}
.profile-social-links {
margin:0;
padding:0;
list-style: none;
}
.profile-social-links li {
display: inline-block;
margin: 0 10px;
}
.profile-social-links li a {
width: 55px;
height:55px;
display:block;
background:#f1f1f1;
border-radius:50%;
-webkit-transition: all 2.75s cubic-bezier(0,.83,.17,1);
-moz-transition: all 2.75s cubic-bezier(0,.83,.17,1);
-o-transition: all 2.75s cubic-bezier(0,.83,.17,1);
transition: all 2.75s cubic-bezier(0,.83,.17,1);
transform-style: preserve-3d;
}
.profile-social-links li a img {
width: 35px;
height: 35px;
margin: 10px auto 0;
}
.profile-social-links li a:hover {
background: #ddd;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
CSS has a 3d object location - the obvious x and y, but there is also a z element. This Z element determines which elements display over others, and which go behind. To set the z element (or index), use the z-index property.
i'm working on a full screen menu for a website but I need to disable the user to scroll while the menu is open. I can't find a fitting solution on the internet so it would be great if anyone could help me. I am not sure how to trigger the body to no-scroll if the menu is open. I am not that familiar with js.
Here is my code at the moment:
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
menu.style.top = "-100vh";
}
function openmenu(){
menu.style.top = "0";
}
</script>
</body>
And that's the CSS
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
Thanks for your help!
I used document.querySelector('body').classList.add('no-scroll') when menu opened & document.querySelector('body').classList.remove('no-scroll') when menu closed.
*{
padding: 0;
margin: 0;
font-family: sans-serif;
user-select: none;
}
.container{
height: 100vh;
width: 100%;
background-color: white;
position: relative;
}
.navbar{
width: 100%;
position: fixed;
}
.navbar-wrapper{
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.logo img{
width: 50px;
cursor: pointer;
margin: 35px 0;
}
nav ul li{
list-style: none;
margin: 35px 0;
}
nav ul li a{
text-decoration: none;
font-size: 40px;
color: white;
padding: 10px;
letter-spacing: 5px;
position: relative;
}
nav ul li a::after{
content: '';
height: 3px;
width: 0%;
background: #dfa24e;
position: absolute;
bottom: 0;
left: 0;
transition: width 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
nav{
position: absolute;
width: 100%;
height: 100vh;
background-color: grey;
z-index: 2;
top: -100vh;
left: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: 1s;
overflow: hidden;
}
.lite-text{
color: transparent;
font-size: 200px;
letter-spacing: 100px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 800;
z-index: -1;
-webkit-text-stroke: 5px #000;
}
.close-icon{
width: 25px;
position: absolute;
right: 80px;
top: 50px;
cursor: pointer;
}
.menu-icon{
width: 30px;
cursor: pointer;
}
section{
height: 100vh;
width: 100%;
}
.one{
background-color: tomato;
}
.two{
background-color: thistle;
}
.three{
background-color: blue;
}
.four{
background-color: blueviolet;
}
.five{
background-color: wheat;
}
.no-scroll {
overflow:hidden;
}
<body id="body">
<div class="navbar">
<div class="navbar-wrapper">
<div class="logo">
<img src="images/Gautama_Buddha_pic.png">
</div>
<nav id="menu">
<ul>
<li>ARTIST</li>
<li>EXHIBITIONS</li>
<li>EVENTS</li>
<li>VISIT US</li>
</ul>
<p class="lite-text">MENU</p>
<img src="images/close-line.png" class="close-icon" onclick="closemenu()">
</nav>
<img src="images/hamburger-menu.png" class="menu-icon" onclick="openmenu()">
</div>
</div>
<section class="one">
<h2>Hello World</h2>
</section>
<section class="two"></section>
<section class="three"></section>
<section class="four"></section>
<section class="five"></section>
<script>
var menu = document.getElementById("menu");
function closemenu(){
document.querySelector('body').classList.remove('no-scroll')
menu.style.top = "-100vh";
}
function openmenu(){
document.querySelector('body').classList.add('no-scroll')
menu.style.top = "0";
}
</script>
</body>
Im currently working on header and I made a hamburger slide using javascript. The problem is when the bar slides to right , the title <h2> stays in his place. I hope there is a way to make it slide with the bar.
function show() {
document.getElementById('sidebar').classList.toggle("active");
}
header {
background: #ff5f88e6;
padding: 25px;
overflow: hidden;
}
header h2 {
margin-top: 0px;
color: #fff;
text-align: center;
}
#sidebar {
position: absolute;
height: 100%;
width: 250px;
padding: 24px 20px;
left: -300px;
top: 0
}
.toggle-btn {
left: 340px;
top: 15px;
position: absolute;
}
.toggle-btn span {
width: 45px;
height: 4px;
background: #000;
display: block;
margin-top: 8px;
}
#sidebar.active {
left: 0;
transition-duration: 500ms;
}
#sidebar ul li {
padding: 20px 24px;
font-size: 25px;
border-radius: 50px;
}
<header>
<div id="sidebar">
<div class="toggle-btn" onclick="show()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu">
<ul>
<li>Category</li>
<li>Discusion</li>
<li>Quotes</li>
<li>Add Review</li>
</ul>
</div>
<h2>"A Book can change the way you look"</h2>
</header>
</div>
that's what's before clicking on the hamburger
what happens after
I want the title to slide right so the user can read it
An easy option is to add a class to the header element as well when you move the menu to move the h2 element as well.
Edit: I removed the active class from the sidebar and just created a css selector to change the menu based on the parent active class. This selector #header.active #sidebar
function show() {
document.getElementById('header').classList.toggle("active");
}
header {
background: #ff5f88e6;
padding: 10px;
overflow: hidden;
display:flex;
justify-content:center;
align-items: center;
}
#header.active h2{
margin-left: 300px;
}
header h2 {
transition: 500ms all;
margin: 0;
padding: 0;
color: #fff;
text-align: center;
}
#sidebar {
position: absolute;
height: 100%;
width: 250px;
padding: 24px 20px;
left: -300px;
top: 0;
transition: 500ms all;
}
.toggle-btn {
left: 340px;
top: 10px;
position: absolute;
}
.toggle-btn span {
width: 45px;
height: 4px;
background: #000;
display: block;
margin-top: 8px;
}
#header.active #sidebar {
left: 0;
}
#sidebar ul li {
padding: 20px 24px;
font-size: 25px;
border-radius: 50px;
}
<header id="header">
<div id="sidebar">
<div class="toggle-btn" onclick="show()">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu">
<ul>
<li>Category</li>
<li>Discusion</li>
<li>Quotes</li>
<li>Add Review</li>
</ul>
</div>
</div>
<h2>"A Book can change the way you look"</h2>
</header>
I'm trying to create an underline animation when hovering on menu items (based on this CodePen). For some reason, all my menu items are underlined instead of just one when hovering. I only want the menu item that is hovered to be underlined, not everything.
Here is my code:
html {
background-color: #131313;
}
.pages {
position: absolute;
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 17px;
list-style: none;
}
.pages li {
float: left;
display: inline-block;
padding: 15px;
}
.pages a {
color: white;
text-decoration: none;
}
.pages a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .4s ease;
}
.pages a:hover:after {
width: 100%;
left: 0;
background: #fff;
}
<ul class="pages">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
<li>Connect</li>
</ul>
Please help!
Remove position:absolute from .pages a:after. Elements with absolute positioning are not in the normal document flow. In your snippet your 100% width will not be 100% of a but 100% of nearest relativly/absolutly positioned parent(body by defaul; ul in your case).
As an alternative, you may set position:relative to li, so that :after element will be underlying li.
html {
background-color: #131313;
}
.pages {
position: absolute;
margin: 0;
padding: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 17px;
list-style: none;
}
.pages li {
float: left;
display: inline-block;
padding: 15px;
position: relative
}
.pages a {
color: white;
text-decoration: none;
}
.pages a:after {
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .4s ease;
}
.pages a:hover:after {
width: 100%;
left: 0;
background: #fff;
}
<ul class="pages">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
<li>Connect</li>
</ul>
My explanation may be to complicated so you may look at snippet below. I tried to explain positioning.
.box {
width: 100px;
height: 100px;
}
#parent {
background: pink;
width: 200px;
height: 200px;
}
#child1 {
position: relative;
top: 10px;
left: 10px;
background: lightgreen;
}
#child2 {
position: absolute;
background: lightyellow;
}
<div id="parent" class='box'>
<!--parent-->
<!-- relative element stays relative to it's original position but can be shifted-->
<div id="child1" class='box'>position:relative with "top"and"left" of 10px</div>
<div id="child2" class='box'>position:absolute</div>
</div>
<!--
notice how yellow box is stays where it should be without "top"&"left" assigned, but it's owerlaping shifted green box
-->
My menu on my page will not work, it is not at all visible. I set it up on a codepen which works fine but now when I have tried to implement it, it failed to work. Where is it?
Still new to coding but would appreciate help.
HTML:
<body>
<nav class="menu-opener">
<div class="menu-opener-inner"></div>
</nav>
<nav class="menu">
<ul class="menu-inner">
<a href="#" class="menu-link">
<li>home.</li>
</a>
<a href="#" class="menu-link">
<li>portfolio.</li>
</a>
<a href="#" class="menu-link">
<li>about.</li>
</a>
<a href="#" class="menu-link">
<li>contact.</li>
</a>
</ul>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(".menu-opener").click(function(){
$(".menu-opener, .menu-opener-inner, .menu").toggleClass("active");
});
</script>
<div class="hero1">
<div id="hero1title"><h1>simplicity, craft and format <br>is what excites me as a designer</h1></div>
</div>
</body>
CSS:
html,body {
padding:0;
margin:0;
height:100%
}
body {
overflow:hidden
}
/*--Homepage*/
p.footertext {
position:absolute;
left:20px;
bottom:10px;
font-size:12px;
z-index:1
}
#media only screen and (max-width : 400px) {
p.footertext {
display:none
}
}
.hero1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: rgb(247,200,198);
}
div #hero1title h1{
color: white;
font-size: 90pt;
position: absolute;
width: 100%;
height: 100%;
top: 30%;
text-align: center;
}
/* Menu styling*/
%transition {
transition: 250ms all;
}
.menu-opener {
background: none;
cursor: pointer;
height: 4rem;
margin: 1rem;
position: absolute;
user-select: none;
width: 4rem;
}
.menu-opener-inner {
background: white;
height: .5rem;
margin-left: .75rem;
margin-top: 1.75rem;
width: 2.5rem;
#extend %transition;
&::before, &::after {
background: white;
content: '';
display: block;
height: 8px;
width: 2.5rem;
#extend %transition;
}
&::before {
transform: translateY(-.75rem);
}
&::after {
transform: translateY(.25rem);
}
&.active {
background: transparent;
&::before {
transform: translateY(0rem) rotate(-45deg);
}
&::after {
transform: translateY(-.5rem) translateX(-0rem) rotate(45deg)
}
}
}
.menu {
background: rgb(152, 211, 189);
height: 100%;
position: absolute;
top: 0px;
user-select: none;
width: 0rem;
z-index: -1;
#extend %transition;
&.active {
width: 100%;
#extend %transition;
& .menu-link {
color: white;
}
}
}
.menu-inner {
display: block;
flex-direction: row;
height: 450px;
list-style-type: none;
margin-top: 15%;
padding: 0;
}
.menu-link {
color: transparent;
display: flex;
flex: 1 1 auto;
font-size: 70px;
font-family: 'Calibre-Semibold';
height: 25%;
text-align: center;
text-decoration: none;
li {
margin: auto;
}
}
I dropped it all into a fiddle, and I find the following things:
The z-index shouldn't be -1
It's there. But you need to highlight it to see it.
The text is styled horribly, so it doesn't look so great.
Your text color in menu-list is set to "transparent".
Your HREFs should be inside the "li" not outside.