We Keep Coding

Responsive navigation menu aligning

I have a problem with my responsive navigation. My menu is aligned only on contact page. I tried different approach like changing it from inline-block to block to flex, but with no success.I put to sidemenu text-align:center. Can someone help me to fix it?
<header class="header">
<div class="logo">
<img src="assets/img/ermita-logo.png" alt="Solaia" height="40px" width="auto">
</div>
<nav>
<div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i>
</div>
<div id="menu" class="sidemenu">
Home
Wines
Winery
Awards
Contact
×
</div>
</nav>
</header>
CSS
#media screen and (max-width: 600px){
#mainbox{
display:flex;
float:right;
padding-right: 30px;
}
.header{
height: 70px;
position: absolute;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display: inline-block;
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color:black;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
text-align: center;
float:none;
}
.sidemenu a{
display:block;
padding:20px 10px;
text-decoration: none;
font-size: 20px;
color:white;
}
Javascript
function openFunction(){
document.getElementById("menu").style.width="100%";
document.getElementById("mainbox").style.marginLeft="300px";
}
function closeFunction(e){
e = e || window.event;
e.preventDefault();
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
;
}

#m
edia screen and (max-width: 600px){
#mainbox{
display:flex;
float:right;
padding-right: 30px;
}
.header{
height: 70px;
position: absolute;
width: 100%;
}
.sidemenu .closebtn{display:block;}
.sidemenu{
display: block;
top: 0px;
right: 0px;
height: 100%;
background-color: black;
z-index: 1;
overflow-x: hidden;
transition: all .5s;
float: none;
}
.sidemenu a{
display:block;
padding:20px 10px;
text-decoration: none;
font-size: 20px;
color:white;
}
}

Unable to display content behind navbar when fixed position

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;
}

classList toggle(show) doesn't show the dropdown content

I would like to toggle on the "cart" of my website. When it is clicked,there will be a dropdown block. It works well on my another website and I almost copy its right code but it just doesn't show the dropdown content on this website. Would someone help me explain it?
html:
function myFunction(){
document.getElementById("drop").classList.toggle("show");
}
div.icon
{
top:25px;
position:absolute;
right:20px;
float:left;
display:inline-block;
}
div.dropdown
{
position: absolute;
background-color:#F1F1F1;
min-width: 160px;
z-index: 1;
height:215px;
width:400px;
text-align:center;
top:30px;
right:-6px;
}
.dropdown a
{
text-decoration:none;
color:black;
background-color:#E9E9E9;
position:absolute;
width:100%;
bottom:0;
left:0;
padding:13px 0 13px 0;
font-size:11px;
}
.dropdown p
{
position:absolute;
top:100px;
width:100%;
font-size:13.4px;
}
.icon .dropdown::after
{
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1; transparent;
}
.show
{
display:block;
}
<div>
<div class="icon">
<p class="menu-right" style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"><i class="fa fa-shopping-cart" style="color:white;"></i> Cart</p>
<div class="dropdown" id="drop">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
</div>
</div>
The above is the html code. The cart is in the icon class. I create a cart div and a dropdown div. When the cart is be clicked, the dropdown block should appear.

You have div.dropdown in your CSS it's overshadowing .show: https://developer.mozilla.org/docs/Web/CSS/Specificity
Use just .dropdown instead.
div.red {
background-color: red;
}
.blue {
background-color: blue;
}
<div class="red blue">blue</div>
<!--div would be blue if you change div.red to .red-->

it seems your inner element has not a event listener.
a way to do that would be
function myFunction() {
this.classList.toggle("show");
}
document.getElementById("inner").addEventListener('click', myFunction)

There's nothing wrong with your toggle, your CSS is just off. The class show is not applying because of div.dropdown taking priority. I've modified example below.
function myFunction() {
document.getElementById("inner").classList.toggle('show')
}
div.icon {
top: 25px;
position: absolute;
right: 20px;
float: left;
display: inline-block;
background-color: black;
}
.dropdown {
display: none;
position: absolute;
background-color: #F1F1F1;
min-width: 160px;
z-index: 1;
height: 215px;
width: 400px;
text-align: center;
top: 30px;
right: -6px;
}
.dropdown a {
text-decoration: none;
color: black;
background-color: #E9E9E9;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 13px 0 13px 0;
font-size: 11px;
}
.dropdown p {
position: absolute;
top: 100px;
width: 100%;
font-size: 13.4px;
}
.icon .dropdown::after {
content: "";
position: absolute;
bottom: 100%;
right: 7%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #F1F1F1;
transparent;
}
.show {
display: block;
}
<div class="icon">
<p style="color:white;font-size:14px;font-family:Roboto; cursor:pointer;" onclick="myFunction()"> Cart</p>
<div class="dropdown" id="inner">
<p>Your shopping cart is empty</p>
<a style="color:black;" href="#">CONTINUE SHOPPING <small>&gt</small></a>
</div>
</div>

How to display clicked item from sidebar to first position and remaining list get hidden and on hover show the list

I want sidebar menu in such a way that when I click on clients option it should remove from its position
And display to the first position and remaining menu list get hidden and show when hover on "<" icon, so how to do this using CSS and jQuery actually I don't have that much idea about front-end part.
<html>
<head>
<style>
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<script>
$(".main-menu li").click(function () {
$('li', $(this).closest('ul')).not(this).hide();
});
</scrip>
</body>
</html>
Expected output:
when clicking on clients option it should remove and show the first option and remaining option list get hidden like this but should show on mouse hover
Above image to show remaining options in hidden and on hover show list
Now list should be on hover

Try This
I updated some css and Jquery Functions
Is It Perfect As Per Your Requirement ?
$(document).on('click','.sidenav a',function(){
$('.sidebar').show('slow');
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$('.topnav').append($(this)[0].outerHTML)
$('.sidenav a').hide();
$(this).remove()
});
$('.sidebar').hover(function(){
$('.sidenav a').show('slow');
$(this).hide('slow')
});
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
color:#2196F3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.sidebar{
height:20px;
background:red;
color:#fff;
position:relative;
width:5px;
text-align:center;
line-height:40px;
}
.sidebar:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:10px solid transparent;
border-left: 5px solid red;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<br/>
<div class="sidebar" style="display:none"></div>

$(".sidenav>a").click(function () {
$(this).siblings('a').not(this).hide();
});
$(".sidenav").find('div').hover(function(){
$('a').css("display","block");
})
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px;
font-size: 28px;
padding: 0px 10px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
<div> < </div>
</div>
</body>
</html>

Try Following Whis includes the Css Slider
$('.sidenav a').click(function(){
$('.sidenav a').not(this).hide();
$('.sidebar').show('slow');
});
$('.sidebar').hover(function(){
$('.sidenav a').show('slow');
$(this).hide('slow')
});
.sidebar{
height:20px;
background:red;
color:#fff;
position:relative;
width:5px;
text-align:center;
line-height:40px;
}
.sidebar:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:10px solid transparent;
border-left: 5px solid red;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<br/>
<div class="sidebar" style="display:none"></div>

Make navigation bar fixed after scroll

I'm attempting to make the navigation bar stick to the top, when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar. The JSFIDDLE is here. Any help will be greatly appreciated.
Update: I understand that this can't be implemented through CSS & HTML. What would be the best way to implement this?
<section class="main">
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup"><img src="#""></div>
<div id="header"></div></div></div></div></div></div></div>
<div class="whiteboard">
<h1>HELLO GUYS</h1>
</div>
</div>
<div class="bg1"> <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div>
& the CSS
.main{text-align:center;}
h1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
padding: 10px 10px;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#e94f78;
text-decoration: none;
color:yellow;
background-image:url;
}
h1 a{
text-decoration: none;
color:yellow;
padding-left: 0.15em;
}
h2{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
letter-spacing: 8px;
margin-top: 100px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
line-height: 1.45em;
position: scroll;
text-decoration: none;
color:white;
z-index: -9999;
}
h2 a{
text-decoration: none;
color:white;
padding-left: 0.15em;
}
h5{
position: absolute;
font-family:sans-serif;
font-weight:bold;
font-size:40px;
text-align: center;
float: right;
background-color:#fff;
margin-top: -80px;
margin-left: 280px;
}
h5 a{
text-decoration: none;
color:red;
}
h5 a:hover{
color:yellow;
}
#text1{
-webkit-font-smoothing: antialiased;
display:inline-block;
font: 800 1.313em "proxima-nova",sans-serif;
margin: 20px 20px;
letter-spacing: 8px;
text-transform: uppercase;
font-size:3.125em;
text-align: center;
max-width: 606px;
line-height: 1.45em;
position: scroll;
background-color:#E94F78;
}
#text1 a{
color:yellow;
text-decoration: none;
padding-left: 0.15em;
}
#text1 a:hover{
text-decoration: none;
cursor:pointer;
}
.whiteboard{
background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
background-position: center;
padding: ;
background-color: #fff;
z-index: 1000;
}
.bg{
height:2000px;
background-color:#ff0;
background-image:url(http://alwayscreative.net/images/stars-last.jpg);
position:relative;
z-index: -9999;
}
.bg1{
background-image:url(http://alwayscreative.net/images/stars-last.jpg);
z-index: -9999;
height:1000px;
}
/* Header */
#wrap {
margin: 0 auto;
padding: 0;
width: 100%;
}
#featured {
background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}
#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}
#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}
#featured h1,
#featured h3,
#featured p {
color: yellow;
text-shadow: none;
}
#featured h4{
color:white;
text-shadow:none;
}
#featured h4 {
margin: 0 0 30px;
}
#featured h3 {
font-family: 'proxima-nova-sc-osf', arial, serif;
font-weight: 600;
letter-spacing: 3px;
}
#featured h1 {
margin: 0;
}
.textwidget{
padding: 0;
}
.cup{
margin-top:210px;
z-index: 999999;
}
.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;background-image:url()}
.scroller{background:#FFF;
background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg);
margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

This "sticky" behavior you are referring to has become popular enough over the web that some people suggested it should be implemented as a CSS property like 'position: sticky' however right now and for the foreseeable future it is impossible to make a "sticky element" without the use of Javascript.
var element = document.getElementById('navBar')
window.addEventListener('scroll', function() {
element.getBoundingClientRect().top < 0 ?
element.classList.add('stuck') :
element.classList.remove('stuck');
});
where in CSS .stuck {position: fixed;}
... something like that

You can do it something like this :
http://jsfiddle.net/ux41b606
HTML:
<div id="image">Some image</div>
<div id="scroller">Some controls</div>
CSS:
body {
height: 3000px;
top: 0;
}
#image {
width: 100%;
background: #444;
height: 50px;
}
#scroller{
height:100px;
background:#ccc;
}
.stuck{
position:fixed;
z-index:100;
width:100%;
top:0;
}
JavaScript:
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#scroller').addClass('stuck');
} else {
$('#scroller').removeClass('stuck');
}
});
after scroll 50 px it will change the css of scroller.
this may be a good start

it works for me
window.addEventListener( 'scroll', function() {
// if scroll down after 45px (position Y)
if (window.scrollY > 45) {
document.querySelector('nav').style.position = 'fixed'
document.querySelector('nav').style.top = '0'
} else {
document.querySelector('nav').style.position='none'
}
});