Responsive design topnavigation

Responsive design topnavigation - html

Im trying to get my navigationbar in my media quires to display its sublist as normal under the parent element "checkbox", though the submenu is placed on top of the rest of the list, and are not "pushing" the rest of the list down as i want. Im a beginner with html and css so i have problably made some stupid misstake, but would be very thankful for any help in the matter, i really cant figure out what i´ve done wrong..
The problem is related to the media quires max-width: 576px.
nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
#media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
position: absolute;
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ▾";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
#media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
#media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}
<nav>
<ul>
<li>Hem</li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li>Matte</li>
<li>Svenska</li>
<li>Engelska</li>
<li>NO</li>
<li>Bild</li>
<li>SO</li>
</ul>
</label>
</li>
<li>Mina Inlämningar</li>
<li>Läxhjälp</li>
<li>Kontakt</li>
</ul>
</nav>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>

remove position:absolute from below class in media query. also check updated code snippet
#lokalnav {
z-index: 1;
}
nav {
width: 17%;
float: left;
padding-top: 4px;
margin-left: 0.5em;
margin-right: 0.6em;
}
/*210/1200*/
nav ul {
list-style: none;
padding-left: 2.14%;
}
/*3/140? = 0.125% ändra padding til procent här?*/
nav ul ul {
margin-left: 5%;
}
nav li {
margin-top: 2px;
display: block;
}
nav a {
display: block;
border: 1px solid grey;
padding: 4px;
text-decoration: none;
color: white;
border-radius: 5px 5px 5px 5px;
background-color: #225d66;
}
/*display block gör att länkarna fyller ut hela bredden för kolumen*/
nav a:link {
background-color: #225d66;
}
nav a:hover {
background-color: #22a4b3;
}
nav ul li ul li {
padding-top: 1px;
display: block;
}
#lokalnav a {
background-color: #2e7d87;
}
#lokalnav a:hover {
background-color: #3fa9b5;
}
nav #thisPage:before {
content: "> ";
}
nav #thisPage {
color: yellow;
}
nav #thisSection:before {
content: "> ";
}
nav #thisSection {
color: yellow;
}
.submenu {
cursor: pointer;
display: block;
}
.submenu ul {
display: none;
}
.submenu input {
display: none;
}
.submenu input:checked~ul {
display: block;
}
#media screen and (max-width: 620px) {
nav {
float: none;
width: 100%;
margin-top: -22px;
margin-left: 1px;
}
nav ul li {
display: inline-block;
position: relative;
}
nav a {
text-align: center;
border-radius: 0px 0px 5px 5px;
padding: 7px 12px 7px 12px;
}
#lokalnav {
z-index: 1;
}
nav ul li ul li {
margin-top: 0px;
margin-bottom: 0;
}
nav ul li a:not(:only-child):after {
content: " ?";
padding-left: 6px;
}
#dropdownbtn {
padding-top: 4px;
}
.topnav a {
padding-right: 2px;
}
main {
margin: 2px;
}
header {
height: 170px;
margin-bottom: 0px;
padding-bottom: 0px;
}
#coursenotes {
float: none;
font-size: 11px;
width: 100%;
margin-bottom: -70px;
font-size: 12px;
padding-left: 10px;
}
#content {
float: none;
width: 100%;
}
#coursenotes a:hover {
font-size: 10px;
}
}
#media screen and (max-width:576px) {
header {
background-size: contain;
}
#steps figure {
float: none;
}
}
#media screen and (max-width: 480px) {
nav ul li {
display: block;
width: 100%;
}
}
<nav>
<ul>
<li>Hem</li>
<li><label class="submenu"><a id="dropdownbtn">Ämnen</a><input type="checkbox">
<ul id="lokalnav">
<li>Matte</li>
<li>Svenska</li>
<li>Engelska</li>
<li>NO</li>
<li>Bild</li>
<li>SO</li>
</ul>
</label>
</li>
<li>Mina Inlämningar</li>
<li>Läxhjälp</li>
<li>Kontakt</li>
</ul>
</nav>

Add this css style to media quires max-width: 576px
#lokalnav {
position: relative;
}

Related

Responsive mobile device menu will not hide on click

I have a menu based on the Webdevkit Responsive menu.
The menu is controlled by a Jquery and I am trying to modify the code so that on the mobile menu when the Hamburger icon is first clicked it changes to an 'X',
then when an item on the mobile menu is clicked the menu is hidden and the 'X' changes back to the Hamburger symbol, and when the hanburger symbol is pclicked the process is repeated.
I have read several articles on this and believe I need to add a class to the HREF, this I have done but have failed to work out the correct(jquery) statement to achieve the above.
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) {
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
/* create mobile dropdown menu */
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
$('.nav-mobile').toggleClass('hide');
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);
<style type="text/css">
body {
margin: 0;
padding: 0;
}
{
font-family: 'Righteous', cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
display: none;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
/* position navbar items */
nav {
float: center ;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.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: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
display: block;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
display: block;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Dropdown nav-bar Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="media/idea3.css">
</head>
<body>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
MENU
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a class="mmenu" href="#">Home</a>
</li>
<li>
<a class="mmenu" href="#">News</a>
</li>
<li>
<a class="mmenu" href="#">Projects</a>
<ul class="nav-dropdown">
<li>
<a class="mmenu" href="#">Project 1</a>
</li>
<li>
<a class="mmenu" href="#">Project 2</a>
</li>
<li>
<a class="mmenu" href="#">Project3</a>
</li>
</ul>
</li>
<li>
<li>
<a clas="mmenu" href="#">About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="media/idea4.js"></script>
</body>
</html>
Any help or ideas on the way forward would be appreciated.
<style type="text/css">
body {
margin: 0;
padding: 0;
}
{
font-family: 'Righteous', cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
display: none;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
/* position navbar items */
nav {
float: center ;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.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: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
display: block;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
display: block;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Dropdown nav-bar Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="media/idea3.css">
</head>
<body>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
MENU
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a class="mmenu" href="#">Home</a>
</li>
<li>
<a class="mmenu" href="#">News</a>
</li>
<li>
<a class="mmenu" href="#">Projects</a>
<ul class="nav-dropdown">
<li>
<a class="mmenu" href="#">Project 1</a>
</li>
<li>
<a class="mmenu" href="#">Project 2</a>
</li>
<li>
<a class="mmenu" href="#">Project3</a>
</li>
</ul>
</li>
<li>
<li>
<a clas="mmenu" href="#">About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="media/idea4.js"></script>
</body>
</html>
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) {
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
/* create mobile dropdown menu */
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
$('.nav-mobile').toggleClass('hide');
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);

I removed the grandparents of the clicked elements as it was already changing the hamburger on click
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
$(this).parent().parent().hide()
/** code by webdevtrick ( https://webdevtrick.com ) **/
(function($) {
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
/* create mobile dropdown menu */
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
$('a.mmenu').click(function() {
$('#nav-toggle').toggleClass('active');
/* edited here*/
$(this).parent().parent().hide()
});
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
});
})(jQuery);
body {
margin: 0;
padding: 0;
}
{
font-family: 'Righteous', cursive;
}
.nav-bar {
height: 70px;
background: #262626;
}
.brand {
display: none;
}
.brand a img {
max-height: 70px;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
/* position navbar items */
nav {
float: center ;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #262626;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2ab1ce;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.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: #262626;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
}
nav ul li ul li a {
padding-left: 30%;
}
.nav-dropdown {
position: static;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
display: block;
}
.brand a img {
max-height: 60px;
margin-top: 5px;
display: block;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Dropdown nav-bar Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<link rel="stylesheet" href="media/idea3.css">
</head>
<body>
<section class="nav-bar">
<div class="nav-container">
<div class="brand">
MENU
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
<a class="mmenu" href="#">Home</a>
</li>
<li>
<a class="mmenu" href="#">News</a>
</li>
<li>
<a class="mmenu" href="#">Projects</a>
<ul class="nav-dropdown">
<li>
<a class="mmenu" href="#">Project 1</a>
</li>
<li>
<a class="mmenu" href="#">Project 2</a>
</li>
<li>
<a class="mmenu" href="#">Project3</a>
</li>
</ul>
</li>
<li>
<li>
<a clas="mmenu" href="#">About</a>
</li>
</ul>
</nav>
</div>
</section>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="media/idea4.js"></script>
</body>
</html>

By changing the HREF on the dropdown in the HTML to ditem.
Add below to Jquery
$('a.ditem').click(function() {
$('#nav-toggle').toggleClass('active');
$('nav ul').hide();
Menu now functions correctly

Navbar Dropdown Issue

I'm just starting out with web coding and I don't have much knowledge with css. I think I made some mistakes and I hope I can find a solution here. The issue is when dropdown item opens, "Add New" slipping sideways. How i can fix this problem? Here is my HTML an CSS code. When i write position: absolute; dropdown menu is dissappering too. I'm
nav {
background-color: #c1c1c1;
height: 75px;
}
nav .container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
nav .logo img {
height: 56px;
width: 56px;
padding-top: 8px;
}
.logo {
width: 30%;
}
.nav-items {
display: flex;
}
.menu {
float: right;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu ul li {
float: left;
padding-left: 10px;
}
.menu ul li a {
padding: 8px;
color: black;
text-decoration: none;
}
.menu-item-has-children {
position: relative;
display: inline-block;
}
.menu-item-has-children ul {
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.menu-item-has-children ul li {
float: none;
}
.menu-item-has-children ul li a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.menu-item-has-children:hover ul {
display: block;
}
.menu-item-has-children:hover ul li a:hover {
background-color: #f1f1f1
}
<!DOCTYPE html>
<html>
<head>
<title>NAVBAR</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="nav-first">
<div class="container">
<div class="nav-items">
<div class="logo">
<img src="https://www.postakutun.com/wp-content/uploads/2020/08/cropped-logo-png-120p-2.png" alt="Logo">
</div>
<div class="menu">
<ul class="menu-ul">
<li>Home</li>
<li>Privacy</li>
<li>Contact</li>
<li class="menu-item-has-children">Profile
<ul>
<li>My Profile</li>
<li>Security</li>
<li>Options</li>
</ul>
</li>
<li>Add New</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
</html>

how to add a dropdown to my current style of navigation

I need to add a dropdown to my "contact" section and I'm wondering if anyone could help me out with it. I've tried to use: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
but with my ongoing style it is not 100% working correctly. Is there any other way I could implement a dropdown to my "contact" section without adding a "Button" property?
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop"/>
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>Contact</li>
</div>
</ul>
</nav>
.toggle, [id=drop] {
display: none;
}
nav {
margin:0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img{
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding:14px 20px;
color:black;
font-size:17px;
text-decoration:none;
border:none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
}

I think It is necessary to add button...
check my code i have done some changes for you in you code by clicking "Run code snippet" and then "view full page".
.toggle,
[id=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: black;
}
#logo {
display: block;
padding: 10px 0 0 30px;
width: 10%;
float: left;
}
nav img {
width: 200px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
list-style: none;
padding: 0;
margin: 0;
line-height: 32px;
}
nav ul li {
display: inline-block;
float: left;
}
nav a {
display: block;
padding: 14px 20px;
color: white;
font-size: 17px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 20px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
nav a:hover {
color: #FF4E00;
}
#media (max-width :768px) {
#logo {
display: block;
padding: 20px 0 10px 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
nav ul {
float: left;
width: 100%;
text-align: center;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: white;
padding: 14px 20px;
color: black;
font-size: 17px;
text-decoration: none;
border: none;
cursor: pointer;
text-align: center;
}
[id^=drop]:checked+ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
<body>
<nav>
<div id="logo"><img src="images/logow.png"></div>
<label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>Pricing</li>
<li>Faq</li>
<li>
<div class="dropdown">
<button class="dropbtn">Contact
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</div>
</ul>
</nav>
</body>

How to make a responsive navigation bar with menu icon

I am trying to make a responsive navigation bar with responsive style, if the size of screen is smaller than 750px then in the navigation bar will appear the menu icon in the middle and when hovering it will display the options in the list, below is my code, and possibly i have overlapped css styling.
.topnav {
position: relative;
overflow: hidden;
background-color: #a2d4c3;
margin: 3px 50px 3px 50px;
border: 1px solid black;
border-radius: 5px;
}
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
#media screen and (max-width: 760px) {
.topnav a {
float: none;
display: block;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.hidden:hover a {
background-color: #dab756;
display: block;
}
.hidden:hover ul a:hover {
color: #fff;
}
.hidden li ul {
display: none;
}
.hidden li {
display: block;
float: none;
}
.hidden ul li a {
width: auto;
min-width: auto;
display: block;
}
.hidden .hidden:hover li a {
display: block;
}
#media screen and (max-width: 750px) {
.hidden ul {
position: static;
display: none;
}
.hidden li a {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link </head>
<body>
<header id="header">
<div class="topnav">
<ul class="hidden">
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
</header>
</body>
</html>

Now I think that this snippet is the same as you want...
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: left;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 750px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Menu</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
</div>
</header>

you need to change classes of your nav with javascript depending on conditions something like given below and then style this changed classes accordingly.
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
or refere this example

How to make a responsive navbar without bootstrap?

How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>

body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>

You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Responsive design topnavigation - html

Add this css style to media quires max-width: 576px #lokalnav { position: relative; }

Related

Responsive mobile device menu will not hide on click

Navbar Dropdown Issue

how to add a dropdown to my current style of navigation

How to make a responsive navigation bar with menu icon

How to make a responsive navbar without bootstrap?

Categories

Resources