Currently coding a responsive navbar however 2 things are really bothering me that I can't get my head round. Any help would be appreciated:
1/ With my original logo pic I have been using, I have got the nav links to line up with it (like a sort of display inblock) but I have noticed only lines up in full screen view, as you minimize the screen the links cluster up underneath and then eventually disappear when the screen is really small and the togglebox appears. How can you fix this problem.
2/ I can’t get the icons to hide from the links in fullscreen view, yet I have done the display:none in the coding
My html code so far:
<!DOCTYPE html>
<html>
<head>
<title>nav bar</title>
<link rel="stylesheet" type="text/css" href="CSS/style.CSS">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jqueryui/1.12.0/jquery- ui.min.js"></script>
<script type="text/javascript">
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
</script>
</body>
</html>
My CSS so far:
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header{
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1{
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left:0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul{
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li{
border-bottom: 1px solid #575766;
}
.site-nav li:last-child{
border-bottom: none;
}
.site-nav a{
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background:#802CED;
color: #000000;
}
.site-nav--icon{
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align:right;
color: rgba(185,153,2,1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right:1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background:#000000;
height: 3px;
width:1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before{
transform: translateY(-6px);
}
.hamburger::after{
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before{
opacity: 0;
}
.open .hamburger::after{
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle{
display: none;
}
.site-nav{
height: auto;
position: relative;
background:transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border:none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus{
background:transparent;
}
.site-nav--icon {
display: none;
}
}
Put de icon into a div block and hidden the div object.
<div class="boton-menu"><i class="fa fa-bars"></i></div>
and the css:
.boton-menu{
display: none;
}
.fa:fullscreen {
display: none
}
... should do it.
At this point, unprefixed support sits at 1.99% while the prefixed support should be 81.71%:
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
However, in my Chrome (v70.0.3538.77) it doesn't seem to work.
According to this article Chrome v71 will support it.
Spec here.
Browser compat here.
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open', 500);
$(this).toggleClass('open');
})
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
#import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');
:root {
--background: rgba(253, 254, 254, .85);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: #2b58de;
font-family: 'Work Sans', sans-serif;
font-weight: 600;
}
header {
background: var(--background);
text-align: left;
position: fixed;
z-index: 999;
width: 100%;
height: 92px;
}
h1 {
margin-left: 82px;
display: inline-block;
}
.site-nav {
position: absolute;
top: 100%;
left: 0;
background: #2043a9;
height: 0px;
overflow: hidden;
}
.site-nav--open {
height: auto;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: 1px solid #575766;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
color: #b99902;
display: block;
padding: 2em 4em 2em 1.5em;
text-transform: uppercase;
text-decoration: none;
}
.site-nav a:hover,
.site-nav a:focus {
background: #802CED;
color: #000000;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: .75em;
width: 1em;
text-align: right;
color: rgba(185, 153, 2, 1);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.7em;
right: 1em;
cursor: pointer;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #000000;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
}
#media (min-width: 700px) {
.menu-toggle {
display: none;
}
.site-nav {
height: auto;
position: relative;
background: transparent;
float: right;
font-size: 21px;
padding-top: 2em;
}
.site-nav li {
display: inline-block;
border: none;
}
.site-nav a {
padding: 0;
margin-left: 5em;
margin-right: 3.5em;
}
.site-nav a:hover,
.site-nav a:focus {
background: transparent;
}
.site-nav--icon {
display: none;
}
}
.fa:-webkit-full-screen {
display: none
}
.fa:-moz-full-screen {
display: none
}
.fa:-ms-fullscreen {
display: none
}
.fa:fullscreen {
display: none
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<header>
<div class="container">
<h1 class="Logo">logo</h1>
<nav class="site-nav">
<ul>
<li><i class="fa fa-home site-nav--icon"></i>Home</li>
<li><i class="fa fa-info site-nav--icon"></i>About us</li>
<li><i class="fa fa-bus site-nav--icon"></i>blogger</li>
<li><i class="fa fa-envelope site-nav--icon"></i>Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
Related
Hey friends I'm writing the media query for the footer of my website. I'm starting on a max-width of 425px. The first thing that gets messed up when i shrink the screen to this size is shown here - The red line doesn't add up, so i adjust and fix it, but when i shrink the screen to a max-width of 375px the red line moves again, so I create another media query with a max-width of 375px and adjust the line and fix it at 375, but now when i move the screen back up to 425 that line moves again? completely ignoring that style. So i have to adjust it again. But this then messes it up at 375??? What's happening? It's back and forth plz help -Example below
1st thing I do when I resize the screen to 425px and see the problem(as shown in the picture
`#media screen and (max-width: 425px) {
.social .inner:after {
margin-top: -40px;
}
}`
The above code aligns the red line where it needs to be when the screen has a max width of 425px. However when I shrink the screen to 375px the line moves again so maybe I do something like this
`#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -38px;
}
}`
This fixes at 375px. What now happens though is when i go back to 425px the line moves again? and then if that wasn't enough if you shrink down to 375px its misaligned??? Try it out and see
html, body {
margin: 0;
padding: 0;
}
/*---HEADER---*/
header {
background-image: url(../img/contact.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 65vh;
}
.contact-wrapper{
width: 100%;
height: 65vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
header h1 {
color: white;
font-size: 5rem;
font-family: 'Arvo';
margin: 0;
}
/*---NAV---*/
nav {
background-color: white;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 2;
box-shadow: 0px 0px 100px grey;
}
li a {
text-decoration-line: none;
color: rgba(102,102,102,0.75);
}
ul {
margin-right: 30px;
margin-top: 25px;
}
li {
display: inline-block;
font-size: 1.55rem;
margin-right: 20px;
font-family: 'Rajdhani';
}
li a:hover {
cursor: pointer;
color: #1a1a1a;
transition: all 0.7s ease;
}
.after:after {
position: relative;
left: 12px;
top: 2px;
display: inline-block;
content: "";
width: 1px;
height: 20px;
background-color: rgba(102,102,102,0.25);
}
.logo {
color: red;
font-size: 3.7rem;
margin: 10px;
opacity: 1;
margin-left: 30px;
}
/*---MAIN---*/
.contact h2 {
font-family: 'Rajdhani';
color: rgba(102,102,102, 0.85);
font-size: 3rem;
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.contact h2:after {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-left: 5px;
margin-bottom: 13px;
}
.contact h2:before {
content: '';
width: 18px;
height: 2px;
background-color: red;
display: inline-block;
margin-right: 5px;
margin-bottom: 13px;
}
.quote-info {
display: flex;
flex-direction: column;
width: 30%;
margin: 20px;
background-color: rgba(102, 102, 102, 0.2);
margin-bottom: 15px;
}
.quote-info input, .quote-info textarea {
width: 85%;
margin-left: auto;
margin-right: auto;
margin-bottom: 17px;
font-family: 'Rajdhani';
font-size: 1.2rem;
}
.quote-info p {
color: rgb(102, 102, 102);
text-align: center;
font-size: 1.45rem;
font-weight: bolder;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.quote-info .send-quote {
width: 85%;
background-color: red;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
font-size: 1.2rem;
color: white;
font-family: 'Rajdhani';
border: none;
outline: none;
padding: 5px;
}
.send-quote:hover {
transition: all 0.5s ease;
background-color: #cc0000;
}
textarea {
resize: none;
}
hr {
width: 100%;
color: rgba(102, 102, 102);
}
.contact .container {
display: flex;
}
.contact-info h3 {
color: rgb(102, 102, 102);
font-size: 2.3rem;
margin-left: 25px;
font-family: 'Rajdhani';
margin-bottom: 0;
}
.contact-info h3:after {
content: '';
height: 1.5px;
display: inline-block;
background-color: grey;
width: 340%;
position: relative;
top: -30px;
}
.contact-numbers div {
margin-left: 30px;
font-family: 'Rajdhani';
font-size: 1.35rem;
}
.contact-numbers i {
color: red;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
}
.footer div {
display: inline-block;
flex-basis: 33.33%;
font-family: 'Rajdhani';
color: rgba(102,102,102, 1);
margin-top: 5px;
}
.footer h1 {
font-size: 2rem;
margin-top: 15px;
}
.footer .inner {
margin-left: 55px;
}
.social .inner {
margin-left: 45px;
}
.contact .inner {
margin-left: 35px;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 27.1%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 54px;
}
.links .inner:after {
content: '';
width: 10.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -151px;
}
.social .inner:after {
content: '';
width: 5.8%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -171px;
}
.contact .inner:after {
content: '';
width: 7.5%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -174.5px;
}
.wrap:before {
content: '';
width: 100px;
height: 2px;
background-color: red;
position: absolute;
margin-top: 55px;
}
.links a {
display: block;
text-decoration-line: none;
color: rgba(102,102,102, 1);
font-size: 1.2rem;
position: relative;
top: -10px;
transition: color 0.4s ease;
}
.links a:hover {
color: red;
}
.contact p {
position: relative;
top: -10px;
}
.social i {
font-size: 1.7rem;
margin-right: 5px;
position: relative;
top: -20px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.social i:hover {
color: red;
cursor: pointer;
}
#msg {
margin-top: -15px;
}
.footer-textarea {
background-color: rgba(102,102,102, 0.2);
outline: none;
color: rgba(102,102,102, 1);
resize: none;
width: 102%;
}
.footer button {
position: absolute;
margin-left: 23.2%;
margin-top: -40px;
border: none;
font-family: 'Rajdhani';
font-size: 1.2rem;
transition: all ease 0.4s;
outline: none;
}
button:hover {
cursor: pointer;
color: red;
}
.dark {
color: red;
}
.copyright {
position: absolute;
background-color: white;
text-align: center;
width: 100%;
margin-bottom: 0;
font-size: 1.2rem;
padding-bottom: 4px;
}
/*------MEDIA-QUERIES------*/
#media screen and (max-width: 425px) {
/*---NAV---*/
.logo {
font-size: 2.5rem;
margin-left: 10px;
}
ul {
margin: 0;
padding: 0;
}
nav li {
display: none;
}
.ham-menu {
width: 55px;
height: 55px;
position: fixed;
right: 0;
top: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.m1, .m2, .m3 {
border-radius: 4px;
margin: 4px;
width: 35px;
height: 3px;
background-color: red;
float: left;
}
/*---MAIN---*/
header h1 {
font-size: 3rem;
}
.quote-info {
width: 90%;
}
.quote-info p {
position: relative;
top: 2px;
}
.contact .container {
flex-direction: column;
}
.contact-info h3 {
margin-top: 0;
}
.contact-info h3:after {
width: 95%;
}
.contact-numbers {
margin-top: -15px;
}
/*---FOOTER---*/
.footer .wrapper {
display: flex;
flex-direction: column;
}
.footer div {
margin: 0;
}
.footer h1 {
font-size: 2rem;
margin-top: 10px;
}
.footer .inner {
margin: 0;
}
.footer .inner:before {
display: inline-block;
content: '';
width: 100%;
height: 2px;
background-color: rgba(102,102,102, 0.6);
position: absolute;
margin-top: 48px;
}
.links .inner:after {
width: 33%;
margin-top: -152px;
}
.social .inner {
position: relative;
top: -10px;
}
.social .inner:after {
content: '';
width: 18%;
height: 2px;
background-color: red;
position: absolute;
left: 0;
margin-top: -40px;
}
.contact .inner:after {
content: '';
width: 24%;
height: 2px;
background-color: red;
position: absolute;
margin-top: -148px;
}
.links a {
margin-left: 5px;
}
.social h1 {
margin-bottom: 10px;
}
#msg {
font-size: 1rem;
margin-bottom: 0;
margin-right: 25.5%;
position: absolute;
right: 5px;
top: 80px;
}
.footer button {
right: 9.25%;
margin-top: 0.2px;
}
.social i {
font-size: 1.8rem;
margin-right: 2px;
position: relative;
top: -5px;
left: 5px;
color: rgba(102,102,102, 0.7);
transition: all 0.4s ease;
}
.footer-textarea {
width: 88.5%;
margin-top: 5px;
margin-left: 5px;
}
.contact p {
margin: 5px;
font-size: 1.2rem;
}
.copyright {
background-color: red;
}
.copyright span {
color: white;
background-color: red;
}
}
#media screen and (max-width: 375px) {
.social .inner:after {
margin-top: -36.5px;
width: 20%;
}
.links .inner:after {
width: 37%;
}
.contact .inner:after {
width: 27%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<title>Contact | Kane Concrete & Construction LLC</title>
<link rel="stylesheet" href="../css/contact.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="contact-wrapper">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
<ul>
<li class="after">Home</li>
<li class="after">About</li>
<li class="after">Services</li>
<li class="after">Careers</li>
<li>Contact</li>
</ul>
</div>
</nav>
<h1>Contact Us</h1>
</div>
</header>
<section class="contact">
<h2>Get in touch</h2>
<div class="container">
<div class="quote-info">
<p>Get a Quote</p>
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="text" placeholder="Phone Number">
<input type="text" placeholder="Email">
<textarea name="project-details" id="" cols="40" rows="7" placeholder="Give us the specifics on your project"></textarea>
<button class="send-quote">Send</button>
</div>
<div class="contact-info">
<h3>Contact info</h3>
<div class="contact-numbers">
<div>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Matt</p>
<i class="fas fa-phone"></i>
<p>(208)546-7827 -Keegan</p>
</div>
<div>
<i class="fas fa-envelope"></i>
<p>P.O. Box 50860 IF, ID 83405</p>
<i class="fas fa-at"></i>
<p>KaneConcrete#fake.com</p>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1>Quick Links</h1>
Home
About
Services
Careers
Contact
</div>
</div>
<div class="social">
<div class="inner">
<h1>Social</h1>
<i class="fab fa-linkedin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter-square"></i>
<p id="msg">Send some feedback!</p>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="type here..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1>Contact</h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete#fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
</body>
</html>
I couldn't reproduce the problem here (or I didn't understand it completely). But let me point some possible problems with the CSS code there:
To create the red lines, you create an element after the content of the sections. To adjust the position, you are setting the margin to a negative value. This is problematic because the size of the section is not constant, so, the red line will have a sort of undefined position (actually it is bottom of section minus some pixels).
You can set the margin to 0 to verify how the size of the section is volatile (it will change when a line wraps, if the font changes, maybe from browser to browser, etc). I recommend instead using a natural flow, and add a line where its position is. A simple example could be:
header {
width: 300px;
}
h1 {
margin: 0;
margin-bottom: 10px;
}
.line {
height: 2px;
background: black;
}
.red-line {
height: 2px;
background: red;
width: 30%;
margin-top: -2px;
}
<header>
<h1>Quick Links</h1>
<div class="line"></div>
<div class="red-line"></div>
</header>
The negative margin here works because .red-line will always be 2px below .line.
Cya!
`
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
overflow: hidden;
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
`I am trying to create a dropdown menu for my website,changing z-index is not bringing the dropdown infront of other elements.
The image looks like this
If you want me to include the CSS, ill include.. If there is any quick fix let me know. Z-index and changing position: absolute doesn't work either.
The issue is the overflow:hidden you have in place meaning that dropdown was there but the overflow was hiding it.
I'm assuming the overflow was there as a clearfix? If so, alternative solutions exist.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
/* overflow: hidden; */ /* remove this */
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
/* float: left; */ /* and probably this */
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #ddd;
}
.dropdown:hover .dropdown-content
{
display: block;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
I have a drop-down menu on a site that I have been working on I and I need to get rid of this gap above the drop-down menu. It is quite bothersome.
Figure A
So, in an attempt to fix it, I changed the li line-height from 50px to 47px and got this:
Figure B
Almost what I want, but not quite. The problem? The li is higher causing the little animation I have under the li to no longer touch the image.
Then, I tried giving the li a relative position. But now, the drop-down is the same width as the 'Patient Info' link.
Figure C
Here is my jsfiddle link if you would like to fiddle around with it. There is no rush. Thank you!
Code:
body {
font-family: 'Source Sans Pro', sans-serif;
max-width: 2500px;
margin: 0 auto 30px auto;
}
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img#profile {
width: 100%;
max-width: 64px;
border-radius: 100%;
}
.header,
.menu,
.hero,
.slider,
.img-display {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection {
background: #11b5e4;
color: white;
}
::-moz-selection {
background: #11b5e4;
color: white;
}
/* HEADER & MENU STYLE START */
.header {
height: 100px;
padding: 15px 10px 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.header h1 {
margin: 0px 25px 0px 25px;
}
.header img {
height: 100%;
pointer-events: none;
}
.header a i {
font-size: 30px;
margin: 0px 0px 0px 15px;
color: black;
transition: .15s color;
}
.header a i:hover {
color: #11b5e4;
}
.menu-wrapper {
height: 50px;
display: flex;
justify-content: center;
}
.menu li {
display: inline-block;
line-height: 50px;
}
.menu li a {
display: inline-block;
font-size: 23px;
margin: 0px 10px;
transition: .2s cubic-bezier(.5, 3, .5, .5) background;
color: black;
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 0px no-repeat;
text-decoration: none;
}
.menu li a:hover {
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 5px no-repeat;
}
.menu-wrapper #toggle-menu {
display: none;
}
/* FOR STACK OVERFLOW */
.menu li ul {
margin: 0;
padding: 0;
display: none;
background: white;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
li:hover ul {
display: flex;
flex-direction: column;
position: absolute;
}
/* END OF FOR STACK OVERFLOW */
#media only screen and (max-width: 1000px) {
.menu {
opacity: 0;
position: relative;
top: 50px;
transition: .25s opacity;
pointer-events: none;
}
.menu-wrapper #toggle-menu:checked~.menu {
opacity: 1;
pointer-events: all;
}
.menu li {
display: block;
text-align: center;
background-color: white;
padding: 0px 15px;
}
.menu-wrapper label {
align-self: center;
width: 32px;
height: 32px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.menu-wrapper label:hover {
cursor: pointer;
}
.menu-wrapper label#open-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-open-icon.png) center center/cover no-repeat;
}
.menu-wrapper label#close-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-close-icon.png) center center/cover no-repeat;
opacity: 0;
}
.menu-wrapper #toggle-menu:checked~label#open-menu {
opacity: 0;
transform: rotate(360deg);
}
.menu-wrapper #toggle-menu:checked~label#close-menu {
opacity: 1;
transform: rotate(360deg);
}
}
#media only screen and (max-width: 750px) {
.header {
height: 75px;
}
.header h1 {
margin: 0px 5px;
font-size: 20px;
}
.header a i {
font-size: 20px;
margin: 0px 0px 0px 5px;
}
}
/* HEADER & MENU STYLE END */
/* HERO START */
.hero {
display: flex;
justify-content: center;
height: calc(150px + 20vw);
width: 100%;
}
.hero h1 {
text-align: center;
font-size: 35px;
padding: 8px;
margin: 15px;
background: rgba(17, 181, 228, .75);
border-radius: 10px;
color: white;
font-weight: bolder;
}
.hero.a {
align-items: flex-end;
background: url(http://ianspence.us/stack/hero.a.jpg) center/cover no-repeat;
}
.hero.b {
align-items: flex-end;
background: url(media/hero.b.jpeg) center/cover no-repeat;
}
#media only screen and (max-width: 900px) {
.hero.a,
.hero.b {
height: 300px;
}
.hero.a h1,
.hero.b h1 {
font-size: 26px;
}
}
#media only screen and (max-width: 400px) {
.hero.a,
.hero.b {
height: 250px;
}
.hero.a h1,
.hero.b h1 {
font-size: 16px;
}
}
/* HERO END */
<!DOCTYPE html>
<html>
<head>
<title>#pfcainc | Home</title>
<link rel='shortcut icon' href='http://ianspence.us/stack/icon.png'>
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='media/fontawesome/css/fontawesome-all.css'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='robots' content='index, follow'>
<meta name='revisit-after' content='3 days'>
<meta name='viewport' content='initial-scale=1'>
</head>
<body>
<div class='header'>
<img src='http://ianspence.us/stack/icon.png'>
<h1>Panhandle Family Care Associates</h1>
<a href='https://facebook.com/panhandlefamilycareassociates/'><i class='fab fa-facebook-square'></i></a>
<a href='https://twitter.com/pfcainc'><i class='fab fa-twitter'></i></a>
</div>
<div class='menu-wrapper'>
<input type='checkbox' id='toggle-menu'>
<label for='toggle-menu' id='open-menu'></label>
<label for='toggle-menu' id='close-menu'></label>
<!--Start Menu Display-->
<div class='menu'>
<li><a href='=./'>Home</a></li>
<li><a href='services'>Services</a></li>
<li><a href='physicians'>Physicians</a></li>
<li>Patient Info
<ul>
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
</li>
<li><a href='office-info'>Office Info</a></li>
</div>
<!--End Menu Display-->
</div>
<div class='hero a'>
<h1>Treating your family like ours since 2002</h1>
</div>
</body>
</html>
Notes:
In jsfiddle, make sure you increase the width of the preview so that the
full menu is there, not the hamburger menu.
I am trying to avoid Javascript completely.
margin-top: -3px for submenu seems to fix the issue across all (major) browsers, however I'd recommend fix from my Codepen, with flex and defined height for li elements.
Fast & simple
HTML:
<ul class="submenu">
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
CSS:
.submenu {
margin-top: -3px !important;
}
More clean approach
Codepen
I have a navbar that is a mix of links and dropdowns. When I attempt to make the navbar sticky to the top, so that it will fix to the top of screen as the user scrolls, the dropdown functionality of the navbar quits working.
CSS
.topnav {
overflow: hidden;
background-image: url(http://www.buffettworld.com/images/navmenubg.png);
background-size: 100%;
font-family: 'Pathway Gothic One', sans-serif;
margin-top: 10px;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
font-size: 21px;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 21px;
border: none;
outline: none;
color: white;
padding: 14px 25px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #b1d235;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
.sticky {
position: fixed;
top: 10px;
width: 100%
}
HTML
<div class="topnav" id="myTopnav">
HOME
NEWS
TOUR
<div class="dropdown">
<button class="dropbtn">JIMMY
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
BIOGRAPHY
AVIATION
INCIDENTS
BUSINESS EMPIRE
CONTACT JIMMY
</div>
</div>
<div class="dropdown">
<button class="dropbtn">MUSIC
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
ALBUMS
SONGS
CHART HISTORY
TRIBUTE BANDS
</div>
</div>
SET LISTS
ABOUT
ADVERTISE
CONTACT
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script>
window.onscroll = function() {myFunction()};
var mytopnav = document.getElementById("mytopnav");
var sticky = mytopnav.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
mytopnav.classList.add("sticky")
} else {
mytopnav.classList.remove("sticky");
}
}
</script>
Here's a JSfiddle: https://jsfiddle.net/martonian/shopttvk/1/
This is my first time asking a question on here, so hopefully everything is here that is needed. Thanks
Problem
cannot add navigation menu to my project because css3 not need to
define why ?
it display with green lines in all css file why
How to solve this problem ?
my code
<head>
<link href="~/Content/menu.css" rel="stylesheet" />
</head>
<div class="grid">
<div class="grid__item">
<nav class="header">
☰ menu
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
I create menu.css file in content folder i add following code :
css3
#import "compass/css3";
$base-font-size: 16px!default;
$base-line-height: 24px!default;
$base-spacing-unit: $base-line-height!default;
body {
background: grey;
color: #555;
}
.header {
width: 100%;
background-color: #4C8FEC;
height: $base-line-height * 2;
margin-top: $base-line-height;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
&:hover {
color: white;
}
}
.current {
color: white;
}
.menu-icon1 {
display:inline-block;
width: 100%;
height: $base-line-height * 2;
color: black;
line-height: $base-line-height * 2;
text-align: center;;
}
nav ul, nav:active ul {
display: none;
position: relative;
padding: 0 $base-spacing-unit;
background: #4C8FEC;
width: 100%;
list-style: none;
}
nav li {
text-align: left;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
/*MEDIA QUERY*/
// #include media-query(desk){
#media screen and (min-width: 600px) {
nav {
float: left;
.menu-icon1 {
display: none;
}
}
nav ul, nav:active ul {
display: inline;
padding: 0;
width: 100%;
}
nav li {
display: inline-block;
width: auto;
padding: 0 $base-spacing-unit;
line-height: $base-line-height * 2;
}
}
image to my problem