I want to make a responsive menu navbar and according to some sites, I tried using the checkbox. Unfortunately, I am unable to make it operational due to reasons unbeknown to me (it would be an overestimate to say I'm an amateur at this). When checking/unchecking the button nothing happens. If there is another more effective way of doing this please do share.
I mustn't use anything but HTML and CSS to make it.
Here's the code. (I know I shouldn't post the entirety of it but I'm too inexperienced to know what's of value and what's not - so sorry about that!)
html:
<nav>
<!--logo-->
TBD
<!--meni-->
<ul>
<li>Landing page</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
css:
nav{
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: #ffffff;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
padding: 0px 5%;
}
nav ul li{
float: right;
display: inline-block;
}
nav ul li a{
margin: 30px;
font-family: calibri;
color: #505050;
font-size: 19px;
font-weight: 700;
}
.checkbtn{
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
#check{
display: none;
}
...
#media screen and (max-width: 796px) {
.checkbtn{
display: block;
margin-right: 40px;
color: black;
}
nav ul {
margin: 0px;
padding: 0px;
background-color: #ebeef4;
flex-direction: column;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
display: none;
}
nav ul li {
padding: 10px;
display: block;
}
nav ul li a{
font-family: calibri;
font-size: 1.4em;
text-transform: uppercase;
color: #5c5c5c;
}
nav ul li a:hover{
color: #121212;
}
#check:checked ~ ul{
display: block;
left: 0;
background: rgba(0,0,0,0.8);
}
nav.active ul {
display: flex !important;
}
I'm really trying to comprehend this and once again I am so sorry for the long post. Cheers!
Check boxes are inputs that need to run by form. What you want to happen when it’s checked?
Related
I am trying to make a dropdown menu, it's my first time doing it and I'm experimenting with it. The problem that I'm facing is this:
As you can see, the principal menus are showing in a list. I have tried displaying them as flex and other attempts, but it seems like the header is making a limitation to them and I don't know how to put them beside each other. (Clarification: 'Notificaciones' and 'Usuario' are main menus and 'Mi Perfil' is a submenu that comes from 'Usuario' (parent))
Here is my code:
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
Thank you so much in beforehand!
First the <li> should have display: inline-block for being arranged in a row. It has nothing to do with the header.
Second, the position of the sub menu (ul ul) needs to be absolute within a li with position: relative.
white-space: nowrap will make the element not wrap when the width is larger than the parent element's width.
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
/* added css */
ul li{
display: inline-block;
position: relative;
white-space: nowrap
}
ul ul{
position: absolute;
right:0;
top:100%
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
I've read all the similar posts about this but none has worked for me so.
Im trying to make a responsive navigation bar with some YouTube tutorials, I have a checkbox to hide an show the menu when the width is to small. I've seen the console looking for bugs but there are no bugs, I've change the browser from chrome, to edge and to firefox but it doesn't seems to be the browser either. Also I changed the tags order in my HTML in order to accomplish the sibling general something rule but nothing has worked and Im kind of stuck whit this.
Here is my HTML code below:
<header>
<nav>
<img class="logo" src="/responsive1/logo.svg" alt="logo">
<input type="checkbox" class="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</header>
And here is the CSS code which I want to use to hide and show the menu:
#media (max-width: 858px) {
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
.check:checked~ul{
left: 0;
}
}
A relevant detail here is that when I add the ~ character and then I click the <input type="checkbox" ... in the browser inspector the #media it's not recognized but when I delete this character It is recognized.
This is the tutorial I'm following, the exact part where he does it is in min 6:30:
https://www.youtube.com/watch?v=oLgtucwjVII
Here is all the CSS code if it helps:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
* {
padding: 0px;
margin: 0px;
text-decoration: none;
list-style: none;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body header {
background-color: #0082e6;
height: 80px;
width: 100%;
}
.logo {
width: 150px;
line-height: 80px;
margin: 15px 100px;
cursor: pointer;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a .active,
a:hover {
background-color: #1b9bff;
transition: .5s;
}
.checkbtn {
font-size: 30px;
color: white;
float: right;
line-height: 80px;
margin-right: 40px;
cursor: pointer;
display: none;
}
.check {
display: none;
}
#media (max-width: 952px) {
.logo {
width: 100px;
margin: 25px 50px;
}
nav ul li a {
font-size: 16px;
}
}
#media (max-width: 858px) {
.checkbtn {
display: block;
}
ul {
position: fixed;
width: 100%;
height: 100vh;
background: #2c3e50;
top: 80px;
left: -100%;
text-align: center;
transition: all .5s;
}
nav ul li {
display: block;
margin: 50px 0;
line-height: 30px;
}
nav ul li a {
font-size: 20px;
}
a:hover,
a.active {
background-color: none;
color: #0082e6;
}
.check[type=checkbox]:checked~ul {
left: 0;
}
}
I was working with a class in the tag <input type="checkbox" class="check"> and the attribute <label for="check"> It seems to work just with ID's.
right now the purple just covers the text but it should be a nice block of colour like the dropdown is. Also, I have a bar under my nav img that should not be there when I hover. I know it is a width/height thing, but no matter where I put the code it does not work.
https://codepen.io/Smoki248/pen/NWxrOWK
li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;
}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}
nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;
}
.dropdown > li a {
font-size: 16px;
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}
.dropdown-content li a {
float: none;
color: #f4f4f4;
padding: 10px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #625aa9;
color: #f4f4f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li>About</li>
<li>Services</li>
<div class="dropdown">
<li><i class="fa fa-caret-down"></i> Portfolio<li>
<div class="dropdown-content">
<ul>
<li>Photography</li>
<li>Composite</li>
<li>Logos</li>
<li>Branding</li>
<li>Advertising</li>
</ul>
</div>
</div>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
</header>
The problem is tag a's default display is inline, so if you want to adjust height of a tag, you have to change it's default display to display: inline-block like this, and then you may be able to do whatever you want with that a tag, you can refer my code below for more details:
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}
you can take a look in my codepen.io for more details here. Hope it will help
So I try to change li's vertical position but when I do the nav bar height is affected as well. What is the way to actually do that without affecting nav bar's height?
Here's the code:
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
What is your goal here? To have the content centered or...?
It may be better to use flexbox here rather than set the padding-left: 850px; on your ul (also on your ul you could've used display: block; margin: 0 auto; to center it.) If you'd like, you can give your ul a defined height and use align-items to specify how it should be aligned vertically.
body {
margin: 0;
}
nav {
background-color: #333;
display: flex;
justify-content: center;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
align-items: center;
}
li {
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<body>
<nav>
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</nav>
</body>
You can add position: relative; and a value for bottom or top- in my snippet bottom: 4px;:
This reserves the space originally taken by the element (without position: relative;), but moves the element according to the top/bottom/left/right settings, without affecting other elements.
body {
margin: 0px;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
padding-left: 5px;
padding-top: 10px;
background-color: #333;
overflow: hidden;
}
li {
float: left;
height: 30px;
width: 100px;
background-color: grey;
color: white;
margin-right: 4px;
text-align: center;
line-height: 30px;
font-weight: bold;
font-size: 15px;
position: relative;
bottom: 4px;
}
li a {
text-decoration: none;
color: white;
display: block;
}
ul li:hover {
opacity: 0.8;
}
<ul>
<li>Home</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
This is my first ever post to Stack Overflow and I'm not familiar with forum regulations with posting. So please let me know anything that I have done wrong. I have researched this issue in the forums and nothing I've come across gives me a clear answer.
I am trying to create a dropdown menu from the "News" element, but I never get any visible result when running the code. I tried to change the .dropdown-content's display value to block to see if it would make the list visible, but nothing showed. What am I missing?
body{
background-image: url("images/seamless-panda-bear-pattern.jpg");
font-size: 100%;
width: 80%;
margin: auto;
font-family: Palatino,"Palatino", Arial;
}
#top{
background-color: black;
color: white;
padding-left: 10px;
border: 2px solid white;
font-family: Copperplate,"Copperplate Gothic Light",fantasy;
opacity: 0.85;
padding-left: 25px;
}
#menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
width: 80%;
}
li{
float: left;
}
#login{
float: right;
padding-right: 20px;
}
li a{
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
}
li a:hover{
background-color: white;
color: black;
}
li.dropdown{
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
padding: 12px 16px;
z-index: 1;
}
.dropdown-content a{
display: block;
text-decoration: none;
padding: 12px 16px;
color: black;
}
.dropdown:hover .dropdown-content{
display: block;
}
#bio{
}
#bottom{
}
<div id="nav">
<ul style="list-style-type: none" id="menu">
<li>Home</li>
<li class="dropdown"><a class="dropbtn" href="#">News</a>
<div class="dropdown-content">
Games
Web Design
Travel
</div>
</li>
<!-- create a link to a part of the same page for contact info -->
<li>Contact info</li>
<li id="login">Log In</li>
</ul>
</div>
To solve your position fixed issue. You can add position: fixed; to #nav and change the width on #menu from width: 80%; to width: 100%;
Here's a JS Fiddle.
Hope that helped!