I am making a responsive navbar which turns into the hamburger icon on mobile phones. I used media queries to check for mobile phones and create a hamburger icon. Then I made a mobile menu which appears and disappears when the hamburger icon gets toggled. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Nav Bar</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<!-- Nav Bar -->
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
<input type="checkbox" id="toggle">
</div>
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
</body>
</html>
SASS (Use Compiler):
// Fonts
#import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
#toggle {
display: none;
}
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
#media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}
The problem is in this line:
#toggle:checked + .menu {
display: flex;
}
When clicked on the hamburger icon, it doesn't display the menu, instead it keeps it's display to block.
Things I have tried:
Changing the display to block when the the toggle checkbox gets clicked
Setting display to none for unchecked and flex when checked as described here
Putting .menu div and #toggle checkbox in a single div as Toni Michel Caubet said (This method does work, thanks but it works with a single element like an h1, not with a div containing many elements)
Changing the combinator or grouping .menu div and #toggle checkbox after putting them in a div
EDIT:
At point 4, things started to work a bit. When I changed the + to a comma to group both of them, the menu appeared. But it didn't closed after clicking it again. I changed the display to block of the hamburger menu, and the checkbox was checked when the page got loaded. But after unchecking it, the checkbox disappeared but the menu didn't. I need a solution to this.
NOTE:
I want to make this entirely in CSS (Or SASS) without the use of JavaScript or jQuery
Thanks for the help!
Few things going on here.
As stated in the comments, the problem is that your checkbox isn't in the same container as your mobile nav.
You also have some <a> tag, closing as </button>, meaning that your html is incorrect.
Solution
Keep the label of the checkbox where it is.
Move the checkbox to be a direct sibling of .menu.
Then adjust your css to have #toggle as a selector and not div.mobile-nav #toggle.
toggle is an id, you don't need to have a stronger specificity as it's a unique element.
Short reminder of the selector: .foo + .foo2
This selector will select every element with the class .foo2 if they are the next sibling of a element with the class .foo.
Therefore, they have to be in the same parent node and be one next to each other.
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
</div>
<-- I've moved the checkbox. Now the selector #toggle + .menu will work -->
<input type="checkbox" id="toggle">
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
// Fonts
#import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
}
#toggle {
display: none;
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
#media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
}
#toggle { //#toggle is on it's own now, it doesn't need more specificity
visibility: hidden;
height: 0;
width: 0;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}
Related
I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere.
That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-color: var(--color-dark);
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--color-dark);
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<img src="images/landingpage_picture.jpg" alt="Landing Image" class="landing_image">
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)
You mean like this?? Just change your img its on the body.
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
background-size:cover;
background-repeat:no-repeat;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
.landing_image {
display:flex;
justify-content:right;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat;
}
nav{
height: 85px;
width: 100%;
z-index:1001;
}
label.logo{
color: rgb(255, 255, 255);
font-size: 35px;
line-height: 80px;
padding: 0 100px;
font-weight: bold;
}
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: #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){
label.logo{
font-size: 30px;
padding-left: 50px;
position: fixed;
}
nav ul li a{
font-size: 16px;
}
}
#media (max-width: 858px){
.checkbtn{
display: block;
}
label.logo{
color: white;
font-size: 35px;
line-height: 80px;
padding: 0 0px;
font-weight: bold;
}
nav {
z-index: 1001;
}
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: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
}
}
.vid-background {
z-index: -100;
width:100%;
height:80vh;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
.reg-element {
width:100%;
height:80vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles.css"/>
<title>SnowWarrior Landing Page</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<img src="https://img.icons8.com/ios-glyphs/30/000000/menu--v1.png" alt="menu"/>
</label>
<label class="logo">SnowWarrior</label>
<ul>
<li>Home</li>
<li> Shop</li>
<li> Contact</li>
</ul>
</nav>
<div class="vid-background">
<video autoplay loop muted>
<source src="./assets/winter1.mp4">
</video>
</div>
<section></section>
<div class="reg-element">
<span>Just saying</span>
</div>
</body>
</html>
The video overflowing into the navbar is by choice since that is what I'm trying to achieve. However, when I try to add more div elements with text in there, it shows up behind the video instead of below the video. I'm very new to HTML and CSS (just dived into these two days ago) so I may be doing some things wrong here. But I would be glad if someone could point the right thing out to me.
Edit: Does anyone know how to embed a video into an HTML so it shows on StackOverflow?
This would be my approach:
Using modern layout algorithms such as flexbox&grid rather than absolute positioning hell. Here I have a header with the nav and video as children. The header is a grid where the nav is explicitly set to take up the top section and the video explicitly told to take up the full grid.
Smaller components use flexbox to flex along a single axis, and when out of room, wrap onto a new line to allow the website to be responsive on small screen widths, removing the need for media queries here.
If you don't understand something and want me to update this answer to explain it, drop a comment.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: montserrat;
}
header {
display: grid;
grid-template: min-content 9fr / 1fr;
width: 100%;
min-height: 80vh;
color: white;
}
nav {
grid-area: 1 / 1 / 2 / 2;
height: min-content;
z-index: 10;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
background-color: #0004;
background-blend-mode: darken;
}
.vid-background {
grid-area: 1 / 1 / 2 / 3;
}
.vid-background>* {
width: 100%;
}
h1 {
font-size: 2rem;
}
nav ul {
flex-basis: max-content;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
nav ul li a {
padding: .5rem 1rem;
border-radius: 3px;
color: inherit;
text-transform: uppercase;
transition: .5s;
}
a:active,
a:hover {
background: #1b9bff;
}
<header>
<nav>
<h1>SnowWarrior</h1>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
<div class="vid-background">
<img src="https://source.unsplash.com/random/800x400">
</div>
</header>
Just saying
This is because you're using position:fixed for everthing at the top, which then sadly makes your next element not care about its existance.
Simply put, if you put position:fixed, and then simply add an div with no position defined, they will not relate to eachother. As I do not know how you wish this to work I cannot fix the code for you, hence I will have to simply inform you about this and hopefully you'll be pointed in the direction you asked for - check position out in some css tutorials.
Display:flex is a good place to start.
I am trying to make my header/banner (which will eventually be input into a SharePoint masterpage) responsive. I have a set height for the header, where usually if I am making anything responsive, I set the height to auto.
I am using a flex to contain the info within the banner. When I toggle the device emulation and make the window smaller, the headers push right and eventually are hidden along with the image on the right.
I want to make it so that when the viewport shrinks small enough, all of the headers are contained in something along the lines of an accordion or create my own button(dropdown) with the same styling as an accordion. Would I need to utilize :before or :after.
Something like this (containing all of the headers/anchors when in a small viewport):
Here is my original snippet & Fiddle:
body {
font-family: Arial, Helvetica, sans-serif;
}
.armylogo{
float: left;
justify-content: center;
height: 95%;
bottom: 0;
width: auto;
vertical-align: baseline;
}
.armylogo2{
float: right;
justify-content: center;
height: 95%;
bottom: 0;
width: auto;
vertical-align: baseline;
}
.navbar {
overflow: hidden;
background-color: #104723;
height: 94px;
width: 100%;
text-align: right;
float: left;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: center;
}
.dropdown {
float: left;
overflow: hidden;
vertical-align: center;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #104723;
}
.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;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/>
Home
News
Test 1
Test 2
Test 3
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/>
</div>
HERE IS THE UPDATED VERSION FROM ANSWER (STILL NOT WORKING)
.navbar {
/* overflow: hidden; */ /* not needed */
background-color: #104723;
height: 94px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}
.armylogo,
.armylogo2 {
height: 95%;
/* bottom: 0; they should just sit in space */
padding: 0 2px; /* keep logo from touching edge */
width: auto;
}
.navbar a {
font-size: 16px;
color: #fff; /* use one type of color values */
padding: 14px 16px;
text-decoration: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
#media only screen and (max-width: 600px) {
.newDiv {
width:50%;
display:flex;
flex-wrap:wrap;
}
}
.navbar a {
font-size: 16px;
color: #fff; /* use one type of color values */
padding: 14px 16px;
text-decoration: none;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: center;
}
.dropdown {
float: left;
overflow: hidden;
vertical-align: center;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #104723;
}
.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;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo"/>
<div class="newDiv">
Home
News
Test 1
Test 2
Test 3
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Military_service_mark_of_the_United_States_Army.png" class="armylogo2"/>
</div>
You can wrap this part of your component in a div and then you can give this properties to that div in media query.
Home
News
Test 1
Test 2
Test 3
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
Also for your a elements and .dropdown you should give width:%50 in media query then they will be 3 rows and 2 columns in total. Of course you can also change font sizes or other featerus in media query.
#media only screen and (max-width: 600px) {
.newDiv {
width:100%;
display:flex;
flex-wrap:wrap;
}
}
Agree with #EvrenK about the approach. One thing to note about the ::before and ::after pseudo-elements is that you can't attach events. So really a styled button would be the best approach, with the best semantics too.
A little off topic, but noticed a few general things about your sample. One practice that might help is grouping your selectors, also you have some bonus declarations floating around. Flexbox should pretty much buy you everything you'll need for this nav. So no floating.
CSS tends to be kinda verbose and carving away the extra stuff generally makes it a lot more readable/less headache inducing.
.navbar {
/* overflow: hidden; */ /* not needed */
background-color: #104723;
height: 94px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* possibly leave out to keep both logos visible for narrow views */
}
.armylogo,
.armylogo2 {
height: 95%;
/* bottom: 0; they should just sit in space */
padding: 0 2px; /* keep logo from touching edge */
width: auto;
}
.navbar a {
font-size: 16px;
color: #fff; /* use one type of color values */
padding: 14px 16px;
text-decoration: none;
}
I want to say first that I'm new to web dev, so maybe there's an obvious error I can't catch in my code... My problem is that the responsiveness of the site works only while I'm trying it in the dev tools, but in the actual site, there's a section that doesn't resize along with the others (section1 actually). This happens whit the tablet.css, because mobile and desktop work almost fine. I'm starting to have the doubt that maybe even mobile.css has this problem because I can't make the browser window so small, so I rely on the dev tools. I honestly can't figure why... I've tried in different browsers (Brave, FF Developer Edition, Microsoft Edge) and the story is the same.
I leave you my code, I use three CSS for mobile, tablet, and desktop, since I thought with media queries it would have been too complicated.
with dev tools
in the site
HTML:
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<link rel="stylesheet" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Domine:wght#400;700&family=Lora:ital,wght#0,400;0,600;0,700;1,400;1,500&family=Montserrat:wght#300;400;700&display=swap"
rel="stylesheet">
<link rel="icon" href="images/alebacce.ico">
<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 957px)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Bacce's Angle</title>
</head>
<body>
<nav class="navflex">
<img class="logo" src="images/alebacce.png" alt="a logo representing html tags">
<ul class: "menu">
<li>Home</li>
<li>Chi sono</li>
<li>Skills</li>
<li>Interessi</li>
<li>Contattami</li>
</ul>
<input id="hamburger" type="checkbox">
<label for="hamburger"></label>
</nav>
<div class="main">
<picture>
<source
media="(min-width: 650px)"
srcset="images/webdevlr2.png">
<source
media="(max-width: 465px)"
srcset="images/webdevlr2mobile.png">
<img src="images/webdevlr2.png"
alt="Welcome on my site!">
</picture>
<div class="welcome">
<p>
<h1><strong>ALESSANDRO BACCELLI</h1></strong>
</p>
<p><em>Work in progress</em> WEB DEVELOPER</p>
</div>
</div>
<div class="divide first">
<div class="heading">
<h1 id="chisono">Chi sono</h1>
</div>
<div class="section1">
<div class="profile">
<picture>
<source
media="(min-width: 650px)"
srcset="images/profiledef.png">
<source
media="(max-width: 465px)"
srcset="images/profiledefmobile.png">
<img src="images/profiledef.png" alt="A picture of me">
</picture>
</div>
<div class="biography">
<p>Un ragazzo genovese di 24 anni, laureato in <em>Scienze della Comunicazione</em> da sempre appassionato di
tecnologia e digitale. <br><br> Ho recentemente scoperto
la mia passione per la programmazione grazie ai corsi di <strong>start2impact</strong>,
iniziando il mio viaggio nel mondo di Html, CSS e via discorrendo... <br><br>
Per quanto la strada sia ancora lunga ho fiducia nel futuro, questo sito vuole infatti essere l'inizio di un
lungo percorso.</p>
<div class="download">
<button>Scarica il mio CV</button>
</div>
</div>
</div>
</div>
<div class="divide colordifferent">
<div class="heading margin">
<h1 id="skills">Skills</h1>
</div>
<div class="section2">
<div class="hard">
<h2>Hard skills</h2>
<ul>
<li>Inglese fluente</li>
<li class="modifiedli">HTML</li>
<li class="modifiedli">CSS</li>
<li>Canva</li>
</ul>
</div>
<div class="soft">
<h2>Soft skills</h2>
<ul>
<li>Autonomia</li>
<li>Fast learner</li>
<li>Empatia</li>
<li>Ascolto attivo</li>
</ul>
</div>
</div>
</div>
<div class="divide">
<div class="heading bottomodif">
<h1 id="interessi">Interessi</h1>
</div>
<div class="section2">
<div class="inte hard">
<ul>
<li id="programmazione">Coding</li>
<li id="foto">Fotografia digitale</li>
<li id="grafica">Grafica</li>
<li id="discover">Scoprire nuove cose</li>
<li id="cucina">Cucina</li>
<li id="videogiochi">Video-games</li>
</ul>
</div>
<div class="ressi soft">
<ul>
<li id="self">Self-growth</li>
<li id="mind">Mindfulness</li>
<li id="fit">Fitntess & Health</li>
<li id="storia"><span class="history">Storia e Antropologia</span></li>
<li id="book">Lettura</li>
<li id="eco">Ambiente</li>
</ul>
</div>
</div>
</div>
<footer id="chiamami">
<div class="foot"></div>
<div class="foot contact">E-mail<span class="not"><br></span><span class="bracket"> | </span>Linkedin<span class="not"><br></span><span class="bracket"> | </span>Start2impact<br>
<br> ALESSANDRO BACCELLI 2020 ©</div>
<div class="foot"></div>
</footer>
</body>
</html>
Style.CSS (desktop)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
background-color: #E5DDC8;
color: #1F1F1F;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #EBFDFF;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #B1C5E7;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #7699D4;
}
h1,
h2 {
font-family: "Montserrat", "Helvetica", "Arial", sans-serif;
color: #141414;
}
#hamburger {
display: none;
}
.navflex {
display: flex;
background-color: #004369;
font-size: 130%;
color: #FFFFFF;
width: 100%;
height: 100px;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
}
.logo {
height: 100%;
margin-left: 150px;
}
nav ul {
list-style-type: none;
text-align: right;
margin-right: 30px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
padding: 0px 25px;
}
nav a:hover {
text-decoration: underline;
}
nav a:visited {
color: #ffffff;
}
.main {
display: flex;
}
.welcome {
display: none;
color: #FFFFFF;
font-size: 3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-shadow: 2px 2px 2px #1F1F1F;
}
.welcome h1 {
white-space: nowrap;
color: #ffffff;
}
.main img {
width: 100%;
position: relative;
}
.divide {
height: 900px;
margin-top: 120px;
}
.heading {
font-family: "Montserrat",
"Helvetica",
"Arial",
sans-serif;
color: #141414;
font-size: 200%;
margin-bottom: 80px;
text-align: center;
}
.section1 {
display: flex;
justify-content: center;
width: 958px;
margin: 0 auto;
}
.profile {
text-align: center;
}
.biography {
align-self: center;
font-size: 140%;
margin-left: 80px;
}
.biography a {
color: #01949A;
text-decoration: none;
}
.biography a:hover {
color: #004369;
text-decoration: underline;
}
.download {
display: flex;
justify-content: center;
margin: 0 auto;
}
.biography button {
font-size: 130%;
padding: 15px;
background-color: #01949A;
border-radius: 10px;
border: none;
margin-top: 40px;
}
.biography button a {
color: #ffffff;
text-decoration: none;
}
.biography button a:hover {
color: #ffffff;
text-decoration: none;
background-color: #004369;
}
.biography button:hover {
background-color: #004369;
}
.section2 {
display: flex;
margin: 0 auto;
justify-content: space-evenly;
font-size: 200%;
}
.colordifferent {
background-color: #E5F9E0;
padding-top: 120px;
}
.margin {
margin-bottom: 145px;
}
.hard h2,
.soft h2 {
margin-bottom: 25px;
}
.section2 ul {
list-style-type: none;
margin-bottom: 140px;
}
.section2 li {
margin-bottom: 25px;
;
}
.section2 ul li::before {
content: "\2705";
margin-right: 25px;
}
.section2 ul .modifiedli::before {
content: "🚧";
}
.section2 ul #programmazione::before {
content: "👨🏻💻";
}
.section2 ul #foto::before {
content: "📸";
}
.section2 ul #grafica::before {
content: "🎨";
}
.section2 ul #discover::before {
content: "🗺️";
}
.section2 ul #cucina::before {
content: "👨🏻🍳";
}
.section2 ul #videogiochi::before {
content: "🎮";
}
.section2 ul #self::before {
content: "📈";
}
.section2 ul #mind::before {
content: "🧘🏻♂️";
}
.section2 ul #fit::before {
content: "🏋🏻";
}
.section2 ul #storia::before {
content: "🏺";
}
.section2 ul #book::before {
content: "📖";
}
.section2 ul #eco::before {
content: "♻️";
}
.bottomodif {
margin-bottom: 110px;
}
footer {
display: flex;
text-align: center;
align-items: center;
height: 350px;
background-color: #004369;
color: #FFFFFF;
font-size: 130%;
}
.foot {
width: 33.33333%;
}
footer a {
color: #FFFFFF;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
.not {
display: none;
}
Mobile:
body {
display: flex;
flex-direction: column;
font-size: 90%;
width: 100%;
}
nav {
width: 100%;
}
nav ul {
display: none;
}
#hamburger {
visibility: hidden;
}
label,
label::before,
label::after {
width: 100px;
height: 15px;
border-radius: 5px;
background: white;
transition: 0.6s;
-webkit-transition: 0.6s;
}
label {
cursor: pointer;
}
label::before {
content: "";
transform: translateY(-30px);
}
label::after {
content: "";
transform: translateY(30px);
}
#hamburger:checked+label {
width: 0px;
}
#hamburger:checked+label::before {
transform: rotate(45deg) translate(0px);
}
#hamburger:checked+label::after {
transform: rotate(-45deg) translate(0px);
}
.logo {
margin-left: 25px;
}
.main {
display: block;
}
.main img {
display: block;
min-height: 100%;
min-width: 100%;
position: static;
overflow: hidden;
}
.welcome {
display: none;
}
.divide {
height: fit-content;
width: 100%;
}
.section1,
.section2 {
display: block;
width: 100%;
height: initial;
overflow-y: auto;
}
.profile img {
height: auto;
max-width: 100%;
margin-bottom: 20px;
}
.biography {
display: block;
width: 90%;
text-align: left;
margin-left: 5px;
margin: 0 auto;
}
.hard,
.soft {
text-align: center;
margin-bottom: 80px;
}
.hard h2,
.soft h2 {
margin-bottom: 50px;
}
.hard ul,
.soft ul {
text-align: left;
width: 70%;
margin: auto;
word-wrap: break-word;
}
.hard ul li,
.soft ul li {
padding-left: 65px;
text-indent: -65px;
}
.inte,
.ressi {
margin-bottom: 0;
}
.ressi ul {
margin-bottom: 150px;
}
.history {
padding-left: 10px;
}
.bracket {
display: none;
}
.not {
display: unset;
}
Tablet:
body {
width: 100%;
}
.divide,
.section1 {
width: 100%;
}
.first {
height: 1200px;
flex-direction: column;
}
.section1 {
width: 90%;
display: block;
}
.profile {
margin-bottom: 70px;
}
.biography {
margin: 0 auto;
}
.biography button {
margin-top: 70px;
}
Thanks everyone for the help!
As you main issue has been fixed, I try to adress your question from the comments how to use media queries.
You only use one css file for everything. For tablet and mobile devices you use the media queries as below. You start a media query with #media followed by only screen to adress only screens. Then you apply rules like and (min-width) and/or and (max-width) followed by the css opening tag { and closed with the css closing tag }. inbetween the css the same way you write it normally.
/* your normal css here that should apply to every screen width as well as your desktop css that is not covered with the media queries for mobile and tablet */
#media only screen
and (max-width: 480px) { /* <-opening tag media query */
/* your mobile css here
as example: */
.class { /* <-opening tag css selector */
background-color: blue;
} /* closing tag css selector */
#id { /* <-opening tag css selector */
background-color: red;
} /* closing tag css selector */
} /* <-closing tag media query */
#media only screen
and (min-width: 481px)
and (max-width: 957px) { /* <-opening tag media query */
/* your tablet css here
as example: */
.class { /* <-opening tag css selector */
background-color: blue;
} /* closing tag css selector */
#id { /* <-opening tag css selector */
background-color: red;
} /* closing tag css selector */
} /* <-closing tag media query */
I'm trying to make scroll nav like youtube nav
I want to make the scroll-horizontal div get the width of the inline-block elemtns which is <li>
I want someway to make the scroll-horizontal div get the current width automatically even if I added more <li> elements to the nav later
<body>
<nav>
<div class="scroll-horizontal">
<li class=" menu-item"><a class="active" href="">Home</a></li>
<li class=" menu-item">Models</li>
<li class="menu-item">Photos</li>
<li class="menu-item">Videos</li>
<li class="menu-item">Youtube</li>
<li class="menu-item">Links</li>
</div>
</nav>
<style type="text/css">
*{
margin: 0;
padding: 0
}
/*NAV*/
nav{
width: 100% !important;
background: red;
overflow: auto;
}
.scroll-horizontal{
min-width: 300%;
}
nav li{
list-style: none;
display: inline-block;
}
nav a{
text-align: center;
text-decoration: none;
color: #444;
display: block;
padding: 0 20px;
width: 100px;
}
</style>
</body>
the nav that youtube has:
youtube nav
you can see that the nav that they had don't have empty space at the end of the nav like what I have
this might partly answer your question:
As I understand it, the horizontal scroll arrows for the tab menu on youtube are shown, depending on the window width. So I would use the css '#media' rule to specify the width, when the arrows should be displayed. Here is a solution that displays both left and right arrows as soon as the window gets too narrow to display the complete menu:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
}
body {
font-family: Arial;
background-color: #eee;
}
div.scrollmenu {
padding: 0 38px 0 38px;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
}
div.scrollmenu a {
display: inline-block;
color: #000;
text-align: center;
padding: 14px;
text-decoration: none;
background-color: #fff;
}
div.scrollmenu a:hover {
background-color: #aaa;
}
#btn-scroll-lft {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#btn-scroll-rgt {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
padding: 15px;
border: 0px;
height: 46px;
font-weight: bold;
display: none;
}
#media only screen and (max-width: 600px) {
#btn-scroll-lft {
display: block;
}
#btn-scroll-rgt {
display: block;
}
}
</style>
</head>
<body>
<button id="btn-scroll-lft" onclick="scrollWinLeft()"><</button>
<div class="scrollmenu" id="scrollmenu">
one
two
three
four
five
six
seven
eight
nine
</div>
<button id="btn-scroll-rgt" onclick="scrollWinRight()">></button>
<script>
function scrollWinLeft() {
document.getElementById('scrollmenu').scrollBy(-100,0);
}
function scrollWinRight() {
document.getElementById('scrollmenu').scrollBy(100, 0);
}
</script>
</body>
</html>