I'm using a css-only push nav. It works great, however I can't figure out how to make the menu hide away when a nav link is clicked. You have to manually click the menu icon for the menu to go back into hiding. However, when a link is clicked and the site jumps to a section, I want the menu to slide into hiding automatically.
Here's a fiddle of it:
http://jsfiddle.net/ex7jthnn/28/
html:
<input type="checkbox" id="menu" name="menu" class="menu-checkbox">
<div class="menu">
<label class="menu-toggle" for="menu"><span>Toggle</span></label>
<ul class="mainnav">
<li><a class="text-right" href="#about">ABOUT</a></li>
<li><a class="text-right" href="#process">PROCESS</a></li>
<li><a class="text-right" href="#work">WORK</a></li>
<li><a class="text-right" href="#contact">CONTACT</a></li>
</ul>
</div>
CSS:
label{
cursor: pointer;
&:focus;
outline: none;
}
.menu{
position: fixed;
top: 0;
left: 0;
background-color: rgba(111, 206, 204, 0.7);
width: 240px;
height: 100%;
z-index: 10;
}
label.menu-toggle{
position: absolute;
right: -60px;
width: 75px;
height: 90px;
line-height: 0px;
display: block;
margin-top: 30px;
margin-right: -50px;
padding: 0px 0px 0px 20px;
text-indent: -9999px;
background: 50% 50% / 45px 32px no-repeat;
background-image:url(../images/menu.png);
}
a, label{
display: block;
text-align: center;
line-height: 50px;
text-decoration: none;
}
.menu-checkbox{
display: none;
}
.menu .menu label.menu-toggle{
background: none;
}
.menu-checkbox:checked + .menu{
transform: translate3d(0, 0, 0);
-webkit-transition: translate3d(0, 0, 0);
}enter code here
Try to add this piece of code into your website, it should make the job done.
$('ul.mainnav > li > a').on('click', function(e){
$('#menu').prop('checked', false);
});
Related
I've been trying to solve this for two straight days and didn't get it right yet. I basically have a search input inside a nav with results coming from a json file and even though it has a z-index greater than the nav it still gets cut off.
<nav class="navbar">
<ul class="navul">
<li>
<a href="index.html" style="margin: 0; margin-top: 0;">
<img src="logo.png" width="40" height="40">
</a>
</li>
<li>Link1</li>
<li><a style="position: relative;" class="active" href="#">Link</a></li>
<li>Link</li>
<li><div class="search-container">
<form action="" autocomplete="off">
<input autocomplete="off" type="text" name="search" id="search" class="form-control">
<ul class="list-group" id="result"></ul> <- this is the result box
</form>
</div>
</li>
</ul>
</nav>
Here is the CSS with the navbar, the content which goes under it and the search result box
.navbar {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.1);
position: fixed;
z-index: 1;
}
.navul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 2%;
padding-right: 2%;
position: relative;
overflow: hidden;
}
.navul li {
float: left;
padding: 3px;
}
.navul a {
display: block;
color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 18px 20px;
margin: .4em;
text-decoration: none;
transition: all 0.12s ease-in-out 0s;
}
.content {
float: left;
width: 96%;
color: black;
margin-top: 8%;
margin-bottom: 8%;
margin-left: 2%;
margin-right: 2%;
position: relative;
}
#result {
position: absolute;
width: 40%;
max-width:870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
I am trying to create a vertical timeline having this codepen as reference but unfortunately it's not working for me.
My code is here in this sandbox
App.js
import styles from "./styles.module.css";
export default function App() {
return (
<div className="App">
<div className={styles.carouselContentWrapper}>
<div className={styles.year}>
<span>2021</span>
</div>
<ul className={styles.textWrapper}>
<li className={styles.text1}>Text1</li>
<li className={styles.text2}>Text2</li>
</ul>
</div>
</div>
);
}
Styles.module.css
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: 1;
}
Any ideas on what is causing this would be much appreciated.
Note: Just to mention that I am using css modules in my original project so would like it to work by using css modules.
You can put text in div so you can position it:
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: -1;
}
.textWrapper ul li div {
position: absolute;
left: 20px;
top: 25px;
color: white;
}
body {
background-color: blueviolet
}
<div class="App">
<div class={styles.carouselContentWrapper}>
<div class={styles.year}>
<span>2021</span>
</div>
<div class=textWrapper>
<ul>
<li class={styles.text}>
<div>Text1</div>
</li>
<li class={styles.text}>
<div>Text2</div>
</li>
</ul>
</div>
</div>
</div>
it works as reference codepan. give background color to your ul or change for li.
To make sure the media query was actually working and the problem not being me setting the wrong max-width, I set the nav bar to change color and height when the max width was reached. My main goal was for the search bar to move further to the left but this doesn't work (the change in background color was for visual purposes). Why is this so? I'm trying to reposition the search bar as it glitches once the screen gets smaller.
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: rgb(255, 255, 255);
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Your media query is working as expected: The background-colors are applied and the height is set. The background-color for .search wasn't so good visible because the search input has a width: 0px - therefor i tested with 50px. The change of the height wasn't visible because everything was white - therefor i tested with:
nav {
background-color: #ccc;
}
Now you can see that on big screens the nav has no height (= auto) and on small screens 40px (use the browsers dev tools).
Working example:
nav {
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
transform: translate(180px, -1px);
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
Alternative example:
with display: flex for the whole nav container and deactivated transform for the ul in the media query
nav {
display: flex;
justify-content: space-between;
background-color: #ccc;
}
nav ul {
display: inline-flex;
list-style: none;
transform: translate(16%);
}
nav ul li {
margin-right: 50px;
}
.search {
border-radius: 40px;
background-color: lightcoral;
display: inline-flex;
height: 35px;
}
.search input {
position: relative;
left: 10px;
top: 0px;
outline: none;
width: 0px;
border: none;
background: transparent;
transition: 0.5s;
}
.search:hover input {
width: 150px;
}
.btn {
height: 35px;
width: 35px;
border-radius: 35px;
background-color: lightseagreen;
}
.btn i {
position: Relative;
top: 9px;
left: 9px;
}
#media screen and (max-width: 1380px) {
nav {
background-color: greenyellow;
height: 40px;
}
nav ul {
transform: none;
}
.search {
background-color: indigo;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<nav>
<ul>
<li><a href=#>word1</a></li>
<li><a href=#>word2</a></li>
<li><a href=#>word3</a></li>
</ul>
<div class="search">
<input type="text" placeholder="search">
<div class=btn>
<i class="fas fa-search"></i>
</div>
</div>
</nav>
If it is not working for all the div's, check if you forgot to put <meta content="width=device-width, initial-scale=1" name="viewport" /> inside your <head> </head> tags where you have your HTML code. This should do the trick.
I am having issues with my mobile menu, it looks to be a z-index issue as when the menu is toggled, it appears behind the content below. However, I've been playing with this, and I can not get the toggled menu to the front.
Code:
HTML:
<section class="navigation">
<div class="nav-container">
<div class="brand">
<img class="header-image" src="assets/img/storey-and-co-logo.png" alt="Storey & Co. Solicitors" title="Storey & Co. Solicitors">
</div>
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li>
About Us
</li>
<li>
Our Team
</li>
<li>
Services
<ul class="nav-dropdown">
<li>
Divorce
</li>
<li>
Wills
</li>
<li>
Residential
</li>
</ul>
</li>
<li>
Contact
</li>
<li class="nav-highlight">
Obtain a Quote
</li>
</ul>
</nav>
</div>
</section>
Jquery
(function($) {
$(function() {
$('nav>ul>li').addEventListener('click',function() {
$(this).children('.nav-dropdown').show();
});
$('nav>ul>li').mouseleave(function() {
$('.nav-dropdown').hide();
});
});
document.querySelector('#nav-toggle').addEventListener('click', function() {
this.classList.toggle('active');
});
$('#nav-toggle').click(function() {
$('nav ul').toggle();
});
})(jQuery);
Sass
header
background: $brand-primary
height: $nav-height
clear: both
section.navigation
padding: 0px
clear: both
nav
float: right
ul
list-style: none
margin: 0
padding: 0
li
float: left
position: relative
a
display: block
padding: 0 20px
line-height: $nav-height
background: $brand-primary
color: #fff
text-decoration: none
&:hover
background: $brand-3-dark
color: #fff
&:not(:only-child):after
padding-left: 4px
content: ' ▾'
ul li
min-width: 190px
& a
padding: 15px
line-height: 20px
z-index: 1
.nav-highlight a
background: $brand-3-dark
color: #fff
&:hover
background: $brand-3-primary
.nav-dropdown
position: absolute
display: none
z-index: 1
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15)
.nav-mobile
display: none
position: absolute
top: 0
right: 0
background: $brand-primary
height: $nav-height
width: $nav-height
#nav-toggle
position: relative
z-index: 9
left: 18px
top: 22px
cursor: pointer
padding: 10px 35px 16px 0px
span,
span:before,
span:after
cursor: pointer
border-radius: 1px
height: 5px
width: 35px
background: #fff
position: absolute
display: block
content: ''
transition: all 300ms ease-in-out
span:before
top: -10px
span:after
bottom: -10px
&.active span
background-color: transparent
&:before,
&:after
top: 0
&:before
transform: rotate(45deg)
&:after
transform: rotate(-45deg)
#media only screen and (max-width: $breakpoint)
.nav-mobile
display: block
nav
width: 100%
padding: $nav-height 0 15px
ul
display: none
li
float: none
a
padding: 15px
line-height: 20px
ul li a
padding-left: 30px
.nav-dropdown
position: static
#media screen and (min-width: $breakpoint)
.nav-list
display: block !important
.navigation
height: $nav-height
background: $brand-primary
.nav-container
max-width: $content-width
margin: 0 auto
.brand
position: absolute
float: left
padding-top: 10px
vertical-align: middle
text-transform: uppercase
font-size: 1.4em
box-sizing: border-box
a,
a:visited
color: #fff
text-decoration: none
img.header-image
max-width: 200px
#media screen and (max-width: $breakpoint-small)
img.header-image
max-width: 175px
padding-top: 10px
And the live version is here: http://staging-maris-storey.transitiongraphics.co.uk/
Help appreciated
Try adding a relative position and a higher z-index to your nav:
nav {
position: relative;
z-index: 9;
}
I'm not sure why Maggie Serino answer isn't working for you, because it work when I am testing it. However another solution would be to add clear:both; to the first section. The issue is being caused by your fixed height header, which is causing the section below not to be pushed down by the dropdown.
header + section {
clear:both;
}
#Grant Smith if you'd prefer the menu to cover the content you need to give it an absolute position (and the parent needs to be relative). I've tried a bit on your staging and you should add:
nav {
position: relative;
// your other attributes
}
.nav-list {
position: absolute;
width: 100%;
// your other attributes
}
Let me know if it worked.
So I have the exact same CSS3 transition in to places, just with different markup.
one is using just an image in an li wrapped in an anchor tag, and one is using an li tag with an anchor tag inside of that which wraps a figure and a figcaption..
here is the markup.
<ul class="teamProfiles">
<li>
<figure><img src="assets/images/players/playerKris.png" /><figcaption>Kris R</figcaption></figure>
</li>
<li>
<figure><img src="assets/images/players/playerKris2.jpg" /><figcaption>Kris R</figcaption></figure>
</li>
<li>
<figure><img src="assets/images/players/playerJake.jpg" /><figcaption>Jake C</figcaption></figure>
</li>
<li>
<figure><img src="assets/images/players/playerBacon.jpg" /><figcaption>Steven B</figcaption></figure>
</li>
<li>
<figure><img src="assets/images/players/playerJon.jpg" /><figcaption>John A</figcaption></figure>
</li>
<li>
<figure><img src="assets/images/players/playerAmy.jpg" /><figcaption>Amy A</figcaption></figure>
</li>
<li>
<figure><img src="assets/images/players/playerDarth.jpg" /><figcaption>You</figcaption></figure>
</li>
</ul>
here is the css for the markup shown above..
.teamProfiles {
width: 920px;
}
.teamProfiles > li {
float: left;
width: 65px;
height: 85px;
border: 3px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, .3);
margin-left: 3%;
display: inline-block;
}
.teamProfiles > li:first-child {
margin-left: 0;
}
.teamProfiles > li:last-child {
margin-right: 3%;
}
.teamProfiles figcaption {
padding-top: 4px;
}
.teamProfiles > li > a > figure {
width: 65px;
height: 65px;
}
.teamProfiles > li > a {
display: block;
height: 85px;
width: 65px;
text-decoration: none;
text-align: center;
font-family:"proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: .8em;
font-smooth: always;
-webkit-font-smoothing: antialiased;
color: #333;
position: relative;
overflow: hidden;
}
.teamProfiles > li > a::after {
content: attr(title);
background: rgba(0, 0, 0, .5);
display: inline-block;
position: absolute;
width: 65px;
height: 40px;
padding-top: 25px;
top: -20px;
left: 0;
color: #9ecd41;
-webkit-transition: all .5s ease-in-out .6s;
}
.teamProfiles > li > a:hover::after {
top: 0;
}
What the heck am I missing?! its driving me crazy not being able to figure it out..
and yes i'm aware its only got the -webkit-transition property. Thats cause i'm working in Chrome to figure it out.. I had them all and tried in every browser and nothing worked. So I just left this one and was gonna figure it out in Chrome first.
any help trying to spot my stupidity would be awesome! :)
Have you tried removing the ::after for the :hover pseudo?