im trying to make some navbar in hamburger style, and while I :hover that hamburger the ul (the menu actually) open, but while trying to choose one of my li it disappear . I would like to get some help im new with css/html. thank you very much <3 peace
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
}
nav {
height: 80px;
width: 100%;
position: relative;
}
nav .logo {
line-height: 2;
margin-left: 50px;
}
nav img {
width: 2em;
position: absolute;
right: 2em;
top: 1.5em;
cursor: pointer;
}
nav ul {
position: absolute;
padding: 20px;
width: 100%;
top: 0;
display: none;
}
nav ul li {
margin-top: 30px;
text-align: center;
line-height: 5;
}
nav ul li a {
font-size: 1.3em;
}
nav ul li a:hover {
border-bottom: 2px solid black;
}
img:hover+.openw {
display: block;
}
<nav class="nav">
<label for="" class="logo">DesignX</label>
<img src="240.png" alt="">
<ul class="openw">
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</nav>
</body>
Related
I've been working on a navigation bar. I've got it styled the way I like, but for some reason am having issues getting submenus to work.
The code looks like:
<div id="head">
<input id="toggle" type="checkbox">
<label for="toggle" class="icon">
<div><!-- --></div>
<div><!-- --></div>
<div><!-- --></div>
</label>
<div id="nav">
<div>
<ul>
<li class="page_item page-item-8">Home</li>
<li class="page_item page-item-10 page_item_has_children">About
<ul class="children">
<li class="page_item page-item-22 page_item_has_children">Once More
<ul class="children">
<li class="page_item page-item-23 page_item_has_children">Another Sub Page
<ul class="children">
<li class="page_item page-item-25">Final Link</li>
<li class="page_item page-item-24">Something Else</li>
</ul>
</li>
</ul>
</li>
<li class="page_item page-item-21">Another Page</li>
<li class="page_item page-item-20">Subpage</li>
</ul>
</li>
<li class="page_item page-item-13 current_page_item">Shop</li>
<li class="page_item page-item-9">FAQ</li>
<li class="page_item page-item-11">Contact</li>
</ul>
</div>
</div>
</div>
The CSS looks like:
/* Toggle */
#toggle {
display: none;
}
/* Nav */
#nav li.current_page_item a {
background: #d2b48c;
border-radius: 40px;
color: #260f03;
}
#nav li a {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
color: #fff;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 4px;
margin: 20px;
padding: 10px 10px 10px 15px;
text-decoration: none;
text-transform: uppercase;
}
/* Media */
#media screen and (max-width: 600px) {
/* Icon */
.icon {
background: #260f03;
margin: 0 auto;
padding: 20px 20px 30px;
position: absolute;
width: 100%;
z-index: 500;
}
.icon div {
background: #d2b48c;
border-radius: 3px;
height: 2px;
margin: 10px auto 0;
position: relative;
transition: all 0.3s ease-in-out;
width: 3em;
}
/* Toggle */
#toggle:checked + .icon div:nth-child(1) {
margin-top: 25px;
transform: rotate(-45deg);
}
#toggle:checked + .icon div:nth-child(2) {
margin-top: -2px;
transform: rotate(45deg);
}
#toggle:checked + .icon div:nth-child(3) {
opacity: 0;
transform: rotate(45deg);
}
#toggle:checked + .icon + #nav {
top: 0;
transform: scale(1);
}
/* Nav */
#nav {
background: rgba(38, 15, 3, 0.95);
bottom: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: -100%;
transform: scale(0);
transition: all 0.3s ease-in-out;
z-index: 200;
}
#nav div {
height: 100%;
overflow: hidden;
overflow-y: auto;
position: relative;
}
#nav ul {
padding-top: 90px;
text-align: center;
}
#nav li a:before {
background: #fff;
content: '';
height: 0;
left: -0.5em;
position: absolute;
transition: all 0.2s ease-in-out;
width: 0.25em;
}
#nav li a:hover:before {
height: 100%;
}
}
#media screen and (min-width: 601px) {
/* HIDE the dropdown */
#nav li ul { display: none; }
/* DISPLAY the dropdown */
#nav li:hover > ul {
display: block;
position: absolute;
}
/* Nav */
#nav ul {
background: #260f03;
font-size: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav li a:hover {
border-bottom: 1px solid #d2b48c;
border-top: 1px solid #d2b48c;
}
}
JS Fiddle (with submenus):https://jsfiddle.net/2v8zhL3e/1/
JS Fiddle (without submenus): https://jsfiddle.net/b0mj7gp4/
I've found a bunch of tutorials on how to do this, but they are all using a float on the li.
I did have a go at it...
I hid the dropdown: #nav li ul { display: none; }
Then I showed it on hover:
#nav li:hover > ul {
display: block;
position: absolute;
}
Which kind of works...but the links show to the left of the main navigation item, I'd like to just tweak this so the links are stacked and show centered under their corresponding header.
I feel like I'm close, can anyone point me in the right direction?
Thanks,
Josh
You can add display: flex to the li:hover ul, then make the flex-direction: column and make the non-hover event position: absolute, left: 0. This creates an issue with the ul child element floating to the far left. So to fix this issue, you need to style its parent to have a relative position. The following should do the trick.
#nav li {
position: relative;
}
#nav li ul {
left: 0;
position: absolute;
}
#nav li:hover > ul {
display: flex;
flex-direction: column;
}
You haven't position: relative in li.
And, it would be better to use position: absolute without hover, in default.
#nav li {
position: relative;
}
#nav li > ul {
position: absolute;
display: none;
}
#nav li:hover > ul {
display: block;
}
I created a vertical dropdown menu with submenus for my custom Tumblr theme. The menu is below a sidebar on the right side.
I was wondering if someone could look over the code for me. I can't tell If there are errors in the code or not. I'm not a coding expert. I did get this code from a tutorial online and made some adjustments to it. I did ask the person who did the tutorial for help but they did not answer me back. I would be thankful if someone can help me with the code or lead me to some good tutorials online.
Here is the working code:
#navsmenu, ul, li, li li {
margin: 0;
padding: 0;
}
#navsmenu {
position: fixed;
margin-top: 16px;
right: 176;
width: 150px;
height: 27px;
}
#navsmenu ul {
line-height: 25px;
}
#navsmenu li {
list-style: none;
position: relative;
background: #79cde2;
}
#navsmenu li li {
list-style: none;
position: relative;
background: #79cde2;
left: 148px;
top: -27px;
}
#navsmenu ul li a {
width: 148px;
height: 25px;
display: block;
text-decoration: none;
text-align: center;
font-family: 'Ubuntu', sans-serif;
color: #ffffff;
border: 1px solid #eee;
}
#navsmenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#navsmenu ul li:hover ul {
visibility: visible;
}
#navsmenu li:hover {
background-color: #f8a542;
}
#navsmenu ul li:hover ul li a:hover {
background-color: #f8a542;
}
#navsmenu a:hover {
font-weight: bold;
}
<div id="navsmenu">
<ul>
<li>ABOUT</li>
<li>VIDEOS
<ul>
<li>K-POP REVIEWS</li>
<li>K HIP-HOP REVIEWS</li>
<li>SHORT K-POP REVIEWS</li>
<li>SERIOUS K-POP RANTS</li>
<li>K-POP DANCE COVERS</li>
<li>LIFE RANTS</li>
</ul>
</li>
<li>RANDOM K-POP</li>
<li>K-POP EDITS & GRAPHICS</li>
</ul>
</div>
So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?
Not only that, but this is what happens when I hover over it:
Is it possible to also only have the darker background fill the actual black bar it sits inside?
This is the snippet from my style sheet as well:
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
}
.navbar {
height: 5%;
overflow: auto;
margin: auto;
width: auto;
min-height: 60px;
top: 0;
text-align: center;
}
.title {
display: block;
}
.navbar ul {
list-style-type: none;
position: fixed;
top: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
All help is greatly appreciated! First time playing around with CSS!
EDIT:
Here is the snippet of HTML that creates this header
<link rel="stylesheet" type="text/css" href="style/style.css">
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contracts</li>
<li>Other</li>
</ul>
</div>
</header>
Fix the header...not the navbar or the menu.
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {} .title {
display: block;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
body {
height: 2000px; /* so you can see the header NOT moving */
}
<header>
<div class="navbar">
<ul>
<li class="hvr-underline">Home
</li>
<li>About Us
</li>
<li>Contracts
</li>
<li>Other
</li>
</ul>
</div>
</header>
I have a top menu made by a list. All <li>s centers depending on the text though I want to center one the <li>s and then the rest of the <li>s should center on both sides. I want to center the image.
The top menu looks like this:
<div id="topMenu">
<ul>
<li>Forside</li>
<li>Kampe</li>
<li>Truppen</li>
<li><img id="logoMenu" src="images/logo.png"></li>
<li>Galleri</li>
<li>Statistik</li>
<li>Om Klubben</li>
</ul>
</div>
Then I have some CSS:
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
}
#topMenu ul {
list-style-type: none;
margin: 0;
padding: 10px;
text-align: center;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#logoMenu {
background-image: url("images/logo.png");
width: 80px;
}
#topMenu img {
vertical-align: text-top;
}
Here's a jsFiddle
Personally I wouldn't have the logo as an element in the navigation. Semantically it doesn't make sense and its difficult to style. If you divide the menu items in to two ULs you can do the following:
HTML
<div id="topMenu">
<ul id="menu-left">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<img src="URL" />
<ul id="menu-right">
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</div>
CSS
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
position: relative;
}
#topMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
box-sizing: border-box; /* percentage width + padding */
width: 45%;
position: absolute;
top: 0;
}
#topMenu #menu-left {
left: 0;
}
#topMenu #menu-right {
right: 0;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#topMenu a {
color: white;
text-decoration: none;
}
#logoMenu {
display: block;
width: 10%;
margin: 0 auto; /*center*/
}
#topMenu img {
margin: 0 auto;
display: block;
max-height: 100%;
max-width: 100%;
}
https://jsfiddle.net/vvu5k79r/2/
I'm hoping someone might be able to help me with this. It looked fine in the preview mode of my program. However, when I opened it in IE and Chrome, the dropdown remains dropped at all times. I'm guessing it's a simple solution to fix it, but I have been staring at this screen for too long. To see what I'm talking about, please see the picture below.
http://img.photobucket.com/albums/v299/insane43/DropdownError_zpsa3e89f8a.jpg
CSS
body {
background: #eaeff2 url("BG Top.jpg") repeat-x right top }
.menu {
background-color: #97a7b7;
font-family: times;
color: #ffffff;
line-height: 50px;
text-align: center;
margin: 0px auto;
display: block}
.menu ul li:hover > ul {
display: block;
width: auto;}
.menu li:hover ul {
position: absolute;
display: block;
left: auto; }
.menu ul {
margin: 0px auto;
padding: 0;
display: inline-block;
text-align: center;
list-style-type: none; }
.menu ul ul{
background: #eaeff2;
top: 100%;
position: absolute}
.menu ul ul li {
float: none;
position: relative;
background-color: #97a7b7}
.menu li {
float: left;
position: relative:
width: 98%:}
.menu li ul {
display: none; }
.menu a:link, a:visited {
display: block;
height: 50px;
margin-left: 30px;
margin-right: 30px;
font-family: times;
font-size: 16px;
color: #ffffff;
text-align: center;
font-weight: bold;
text-transform: uppercase;
text-decoration: none }
.menu a:hover, a:active {
background-color: #4f5963;
text-decoration: none }
.header {
font-family: times;
color: #ffffff;
font-size: 40px;
vertical-align: middle }
.frame {
width: 98%;
text-align: center;}
iframe {
overflow: hidden;
border: 0px;
padding: 0px;
margin: 0px }
.header img {
vertical-align: middle}
.petpics img {
opacity: 0.7;
filter: alpha(opacity=70);}
HTML
<div id="header" class="header" style="position: absolute; top: 0px; text-align: center; width: 100%"><img height="140px" src="Logo.png">   <span class="petpics" class="petpics"><img height="194px" src="Lily.jpg"><img height="194px" src="Annie.jpg"><img height="194px" src="Smoki.jpg"></span></div>
<div id="menu" class="menu" style="position: absolute; top:194px; left:0px; text-align: center; width: 100%; z-index:1"><center>
<ul>
<li>Home</li>
<li>About</li>
<ul>
<li>Our Board</li>
<li>Our Staff</li>
</ul>
<li>Adopt</li>
<ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
<li>Lost Pets</li>
<ul>
<li>Lost</li>
<li>Found</li>
</ul>
<li>Volunteer</li>
<ul>
<li>Become a Volunteer</li>
<li>Volunteer Login</li>
</ul>
<li>How to Help</li>
<ul>
<li>Membership</li>
<li>Donate</li>
<li>Upcoming Events</li>
</ul>
<li>Education</li>
<ul>
<li>Information</li>
<li>Educational Events</li>
</ul>
</ul>
</center>
</div>
<div id="frame" class="frame" style="position: absolute; top: 280px; width: 98%; height: 100%; z-index:0">
<iframe name="display" width="100%" height="100%" overflow="visible" scrolling="hidden" seamless="seamless" border="0" margin="0" src="Home.html">
</iframe>
</div>
Thank you! Your help is appreciated. Edited to add full code.