for some reason the subitems are not in the middle, looks like they have a margin left for some reason. Can you tell me what is wrong and how to fix it?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Menu Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS-1.css">
</head>
<body>
<ul class="egmenu">
<li>Home</li>
<li>
Products
<ul>
<li>Computers</li>
<li>Phones</li>
<li>Tablets</li>
<li>Other</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>
And here is the CSS:
body {
margin: 0;
padding: 0;
}
ul.egmenu {
background: #333;
height: 30px;
width: 100%;
}
ul.egmenu > li {
float: left;
position: relative;
}
ul.egmenu ul {
background: #444;
display: none;
position: absolute;
left: 0; top: 100%;
}
ul.egmenu ul li {
text-align: center;
}
ul.egmenu a {
cursor: pointer;
display: block;
color: white;
width: 100%;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
}
ul.egmenu li { list-style: none; }
ul.egmenu li:hover { background: #555; }
ul.egmenu li:hover ul { display: block; }
P.S. It would also be nice if you tell me where can i find some lessons or anything to fix my understanding of CSS, as it appears that codecademy is not enough.
You have missed some of the important attributes, i recreated your navbar
Here's the JSFiddle:https://jsfiddle.net/y2641f0w/3/
HTML
<body>
<ul class="egmenu">
<li>Home</li>
<li>
Products
<ul>
<li>Computers</li>
<li>Phones</li>
<li>Tablets</li>
<li>Other</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
CSS
body {
margin: 0;
padding: 0;
}
ul.egmenu{
background: #333;
height: 30px;
width: 100%;
}
ul.egmenu ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
ul.egmenu li {
font-size: 25px;
line-height: 30px;
text-align: left;
}
ul.egmenu a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
ul.egmenu a:hover {
background-color: #555;
}
ul.egmenu a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
ul.egmenu li li {
font-size: 15px;
}
#media screen and (min-width: 650px) {
ul.egmenu li {
width: 130px;
border-bottom: none;
height: 30px;
line-height: 30px;
font-size: 15px;
display: inline-block;
margin-right: -4px;
}
ul.egmenu a {
border-bottom: none;
}
ul.egmenu > ul > li {
text-align: center;
}
ul.egmenu > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
ul.egmenu li ul {
position: absolute;
display: none;
width: inherit;
}
ul.egmenu li:hover ul {
display: block;
}
ul.egmenu li ul li {
display: block;
}
}
You can refer to followings to get more knowledge about NavBars
w3Schools
CSS Menumaker
Related
I'm trying to pin the header and menu to the top of the page. In pc mode and tablet mode it works, but when I enter mobile mode it stops working.
When I scroll down the menu is not fixed. This only happens in mobile mode.
I've tried to edit the css code in several different ways, but I'm not able to.
HTML code:
<header class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">
<nav class="navbar">
<div id="logo"><img src="logo.svg"> </div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#sobre_md" >Sobre</a></li>
<li>Oferta</li>
<li>Implementação</li>
<li>Segurança</li>
<li>FAQ</li>
<li>Imprensa</li>
</ul>
</div>
</nav>
</header>
<script>
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
const links = navbarLinks.querySelectorAll("a")
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
for(let link of links){
link.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
}
</script>
.grid-child.container-component {
grid-column: full-start/full-end !important;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
position: relative;
}
.navbar {
margin: 0;
padding: 0;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
color: white;
background-color: #5aaddd;
}
#logo{
height: 60px;
width: 60px;
}
#logo img{
margin-left: 30%;
height: 100%;
display: flex;
padding: 0.5rem;
padding-top: 10px;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
#button {
display: inline-block;
background-color: #DEDB45;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
I have a menu on my website and it works ok on laptop browser. But on the mobile version, the menu opens and close when i chose a option. But when i click outside de menu it doesn't close.
I would like to know how can i do so that when the user clicks or taps outside the menu the menu closes.
Can someone help please?
My code is:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
const links = navbarLinks.querySelectorAll("a")
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
for(let link of links){
link.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
});
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container-header nav{
margin-top:0em;
}
.position-sticky {
position: sticky!important;
}
body {
margin: 0;
padding: 0;
position: relative;
}
.navbar {
margin: 0;
padding: 0;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
color: white;
background-color:#5aaddd;
box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px 0px;
}
#logo{
height: 60px;
width: 85px;
}
#logo img{
margin-left: 35%;
margin-top: 8%;
height: 80%;
display: flex;
padding: 0;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
font-family: 'Signika Negative', sans-serif;
font-size:15pt;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: 1.3rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 800px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.position-sticky {
position: sticky!important;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
transition: transform 200ms;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<nav class="navbar">
<div id="logo"><img src="/images/logo/logo.png"> </div>
<a href="#" id="toggle" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div id="topbar" class="navbar-links">
<ul>
<li>Sobre</li>
<li>Oferta</li>
<li>Implementação</li>
<li>Segurança</li>
<li>FAQ</li>
<li>Imprensa</li>
</ul>
</div>
</nav>
i tested the following responsive menu and it does not open with an iPhone 6 Safari:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Hamburger-Menü Test</title>
<style>
*,::before,::after{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Verdana', sans-serif;
}
body {
margin: 0;
font-size:100%;
background: #f6f8f9;
}
nav {
display: flex;
height: 80px;
width: 100%;
background: #1c3464;
align-items: center;
padding: 0 50px 0 50px;
flex-wrap: wrap;
overflow: hidden;
position: fixed;
top: 0;
z-index:200000;
border-bottom: 4px solid #9acd32;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
position:absolute;
right:20px;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.1em;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
nav ul li a.active{
color: #111;
background: #fff;
}
nav ul li a:hover {
background:#526788;
}
nav .menu-btn img{
color: #fff;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
#media (max-width: 1200px) {
nav{
padding: 0px 10px 0px 20px;
}
.menu-btn {
position:absolute;
right:20px;
}
nav .menu-btn img{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #173460;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
z-index:200000;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 1.3em;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: cyan;
}
}
</style>
</head>
<body>
<nav >
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAIAAAAzse47AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAZUlEQVRIiWP8//8/A+0BEx3sGLVm1Bq6WcOCSyItM+fz58/EG2RuZlqQl0OyNXv27iPeDgYGBvzZHGegSUtJkWQNHx8fHlnG0cKGdDCa0rCC0ZRGdTCa0rCC0ZQ2as2oNaPW4AMAM3MvRji4G34AAAAASUVORK5CYII=">
</label>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
Hello world!
</body>
</html>
I tested also with a few my Samsung (Android) devices (Chrome)
Also with Windows (different browsers) and it works on all of them.
Any idea, what i can add so that safari will also work?
Please help ;-(
Best wishes
Daniel
So, I am using flexbox for some columns. Basically column 1 is left-aligned, column two i centered, and column three is right-aligned. No big deal, or so I thought. In Chrome, everything looks fine, even when looking at things through Chrome's Inspect tool...but on my iPhone I can't get the right column to justify-content.
My code looks like:
<div id="nav">
<div class="wrap">
<div>
<p><i class="far fa-dot-circle"></i> Watch</p>
</div>
<div>
<p><img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="" title="" /></p>
</div>
<div>
<p><i class="fas fa-donate"></i> Give</p>
</div>
</div>
</div>
The css looks like:
#nav div {
align-items: center;
display: flex;
flex: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-transform: uppercase;
}
#nav > .wrap > div:nth-child(1) {
background: #00ff00;
justify-content: left;
}
#nav > .wrap > div:nth-child(2) {
background: #ff0000;
justify-content: center;
}
#nav > .wrap > div:nth-child(3) {
background: #0000ff;
justify-content: right;
}
#nav img {
max-width: 175px;
width: 100%;
}
#nav i {
color: #fff;
margin-right: 5px;
}
#nav a {
color: #fff;
text-decoration: none;
}
Here is the Fiddle: https://jsfiddle.net/1kw5g3h7/
I added the following code this morning and this works:
#nav > .wrap > div:nth-child(3) p {
text-align: right;
width: 100%;
}
I don't like this approach, it seems like to me the justify-content just isn't working is there a way to fix this using flexbox? I'm trying to understand why my original code isn't working on my iPhone? Maybe it's because I have Font Awesome icons in front of the text, I just don't know. Any ideas?
Thanks,
Josh
I didn't realize until now that I hadn't ever posted my final code. This is what I ended up with: https://jsfiddle.net/tc36e24s/2/
HTML:
<div id="head">
<div id="nav">
<i class="ion-android-close"></i>
<ul>
<li>Watch</li>
<li>Give</li>
<li><img src="images/logo.png" alt="Logo" title="Logo" /></li>
<li>Visitors</li>
<li>Contact</li>
</ul>
</div>
<div id="logo">
<p><img src="images/logo.png" alt="Logo" title="Logo" /></p>
<div onclick="openNav()" class="open">
<i class="ion-android-menu"></i>
</div>
</div>
</div>
CSS
body {
background: #009151;
}
#head {
display: flex;
flex-flow: column;
height: 100vh;
}
#nav ul {
flex: 0 1 auto;
}
#nav ul img {
max-width: 175px;
width: 100%;
}
#nav ul i {
color: #9ac2e7;
margin-right: 5px;
}
#nav li {
font-family: 'Open Sans', sans-serif;
letter-spacing: 2px;
line-height: 18px;
padding: 10px 20px 0;
text-align: center;
text-transform: uppercase;
}
#logo {
display: flex;
}
#logo img {
max-width: 200px;
margin: 20px 30px;
width: 100%;
}
#media screen and (max-width: 800px) {
#head .open {
color: #9ac2e7;
font-size: 30px;
margin: 20px 30px;
text-align: right;
width: 100%;
}
#head .open:hover {
cursor: pointer;
}
#nav {
background: #9ac2e7;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
#nav ul {
align-items: center;
display: flex;
flex-flow: column;
height: 100%;
justify-content: center;
width: 100%;
}
#nav ul a {
color: #000;
text-decoration: none;
}
#nav li {
font-size: 20px;
padding: 10px 0;
}
#nav li:nth-child(3) {
display: none;
}
#nav .close {
color: #000;
font-size: 30px;
position: absolute;
right: 30px;
top: 20px;
}
}
#media screen and (min-width: 801px) {
#nav .close {
display: none;
}
#nav[style] {
display: block !important;
}
#nav ul {
align-items: center;
display: flex;
}
#nav ul a {
color: #9ac2e7;
text-decoration: none;
}
#nav li {
flex: 1;
font-size: 14px;
}
#logo {
display: none;
}
}
JS
function openNav() {
document.body.style.overflow="hidden";
document.getElementById("nav").style.display = "block";
}
function closeNav() {
document.body.style.overflow="scroll";
document.getElementById("nav").style.display = "none";
}
I added some JS to make my menu work on mobile, but other than that this is code I went with...which is pretty much the same as before except I added two additional links (one on each side of the logo).
Thanks,
Josh
I am having problem with centering the navigation. Tried all possible ways. Unable to center it. Wondering what might be affecting? Do I need to target .nav only? Or container too? My website :
HTML
<div id="navcontainer">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
<li>PRADŽIA</li>
<li>APIE MUS</li>
<li>KAINOS</li>
<li>ASMENINĖS
<ul>
<li>Asmeninė fotosesija</li>
<li>Poros fotosesija</li>
<li>Šeimos fotosesija</li>
<li>Nėščiosios fotosesija</li>
<li>Vaikų fotosesija</li>
<li>Draugų fotosesija</li>
<li>Erotinė fotosesija</li>
<li>Švencių fotosesija</li>
<li>Modelio testas</li>
</ul>
</li>
<li>KŪRYBINĖS</li>
<li>ATSILIEPIMAI</li>
<li>KONTAKTAI</li>
</li>
</ul>
</div>
</div><!--/navcontainer-->
CSS
/*---- NAVIGATION -------*/
#navcontainer{
float: left;
width:100%;
padding: 10px 0 10px 0;
font-size:1.2em;
background: #ccc;
}
.toggleMenu {
display: none;
padding: 10px 15px;
color: #fff;
background:#383636;
}
.nav {
list-style: none;
*zoom: 1;
background: blue;
margin: 0 auto;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
display: inline-block;
list-style-type: none;
width: 9em;
}
.nav a {
display: inline-block;
padding: 10px 15px;
color:#383636;
text-decoration:none;
}
.nav li {
position: relative;
display: inline;
}
.nav > li {
float: left;
}
.nav > li > .parent {
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #efefef;
position: relative;
z-index:100;
border-top: 1px solid #ccc;
}
#navcontainer ul li a:hover{
color: #fff;
background: #ccc;
}
#navcontainer ul li a#current{
color: #fff;
background: #ccc;
}
try to add this to your NAV-CONTAINER: margin:0px auto;
Try this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
/*---- NAVIGATION -------*/
#navcontainer{
width:100%;
padding: 10px 0 10px 0;
font-size:1.2em;
background: #ccc;
margin: 0 auto;
text-align: center;
}
.toggleMenu {
display: none;
padding: 10px 15px;
color: #fff;
background:#383636;
}
.nav {
display: inline-block;
list-style: none;
background: #AE4532;
}
ul {
display: inline-block;
list-style-type: none;
width: auto;
}
.nav a {
display: inline-block;
padding: 10px 15px;
color:#3EBD36;
text-decoration:none;
margin: 10px
}
li {
position: relative;
/* display: inline;*/
float: left;
}
.nav li ul {
position: absolute;
width: 100%;
left: -9999px;
}
</style>
</head>
<body>
<div id="navcontainer">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li>PRADŽIA</li>
<li>APIE MUS</li>
<li>KAINOS</li>
<li>ASMENINĖS
<ul>
<li>Asmeninė fotosesija</li>
<li>Poros fotosesija</li>
<li>Šeimos fotosesija</li>
<li>Nėščiosios fotosesija</li>
<li>Vaikų fotosesija</li>
<li>Draugų fotosesija</li>
<li>Erotinė fotosesija</li>
<li>Švencių fotosesija</li>
<li>Modelio testas</li>
</ul>
</li>
<li>KŪRYBINĖS</li>
<li>ATSILIEPIMAI</li>
<li>KONTAKTAI</li>
</ul>
</div>
</body>
</html>