I'm new here and new at HTML and CSS.
I've been trying to create a dropdown menu, and while the drop down menu shows up upon menu hover, it also shows up without menu hover. As soon as I move my cursor within where the dropdown should be appearing, it appears. Do you know what I'm doing wrong and how I should correct it? I hope I'm making sense...
Also, I am aware that the width of my menu expands as I expand the window size. Please ignore that, it doesn't do that in the main code I'm working on.
Thanks in advance!
.top-menu>ul {
background-color: #78a1bb;
font-size: 150%;
padding-left: 0px;
padding-right: 0px;
}
.top-menu>ul>li {
list-style: none;
display: inline-block;
padding: 5px 124px;
position: relative;
}
.top-menu>ul>li:hover {
background-color: #d6e2ea;
}
ul.sub-menu {
position: absolute;
width: 290px;
background-color: #d6e2ea;
list-style: none;
padding-left: 0px;
padding-top: 5px;
opacity: 0;
}
ul.sub-menu li {
font-size: 80%;
padding-top: 10px;
padding-left: 25px;
padding-bottom: 10px;
}
.top-menu li:hover .sub-menu {
opacity: 1;
left: 0px;
}
<nav class="top-menu">
<ul>
<li> A
<ul class="sub-menu">
<li>Sub a </li>
<li>Sub b </li>
<li>Sub c </li>
</ul>
</li>
<li> B </li>
<li> C </li>
</ul>
</nav>
Instead of use opacity to hide your sub-menu. You can use display: none to hide and display: block to show again.
If you just change the opacity, the element remains "under your mouse" and the CSS try to show and hide many times (your sub-menu is "flicking").
Using display: none the sub-menu disappears and your mouse doesn't hover it "forever".
I created a plunker with the right code. https://embed.plnkr.co/TZ7U0m19WijN0kIe6Xgl/
Related
This question already has an answer here:
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 2 years ago.
I made my navigation bar and positioned it (fixed), and it works fine. I was able to scroll down and all. As soon has I added filter (brightness) to it the image on my page, the navigation bar disappeared. I have tried using pseudo-elements and setting the position (absolute/relative), I set the filter property to the container of the child element of the image, it still didn't work. Can someone help me on how to have my navigation bar display on fixed position and still have the image filtered. Thanks in Advance.
nav {
position: fixed;
background-color: #fff;
}
nav ul {
margin: 0;
padding: 0;
}
.navbar-brand {
padding-right: 20px;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
color: #000;
text-decoration: none;
}
nav a:hover {
color: #ff6600;
text-decoration: none;
}
.title-image img {
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
JSfiddle Demo
Just add z-index to your nav element as follow
nav{
position: fixed;
background-color: #fff;
z-index:999;
}
nav ul{
margin: 0;
padding: 0;
}
.navbar-brand{
padding-right: 20px;
}
nav li{
display: inline-block;
padding: 10px;
}
nav a{
color: #000;
text-decoration: none;
}
nav a:hover{
color: #ff6600;
text-decoration: none;
}
.title-image img{
width: 100%;
height: 300px;
filter: brightness(60%);
}
<nav>
<ul>
<li>
<a class="navbar-brand" href="#">Navbar Brand</a>
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
services
</li>
</ul>
</nav>
<div class="title-image">
<img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>
The navbar didn't disappear, it is just beneath the image. To have it in front, you should use z-index: 10; (or any value greater than 0).
See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
In addition, keep in mind that your image - or any element after your navbar - will be positioned on top of your page. May be you'll want to let the equivalent of the navbar height as space before any content.
Could someone help me figure out how to style this code in css to show a drop down menu? Here's what I got so far, but I don't know what to do after. I appreciate your help, thank you.
<nav>
<ul>
<li>Home</li>
<li>Programs</li>
<ul class="drop-down-menu">
<li>Personal Trainer</li>
<li>Group Workout</li>
<li>Pricing</li>
</ul>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
nav{
position: fixed;
z-index: 6;
list-style-type: none;
word-spacing: 30px;
font-family: 'karla', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
background-color: rgba(0,0,0,0.62);
nav a{
color: #F4F4F4;
}
ul li{
display: inline-block;
}
.drop-down-menu{
display: none;
}
If your wanting the dropdown menu to dropdown do not set the list-items (li) under the un-ordered list (ul) to "display: inline-block. This will display the list-items side by side.
Also for your dropdown box you will have to state the border (if wanted), padding, margin etc too.
.drop-down-menu{
display: none;
position: absolute;
background-color: #yourcolor;
width: 100px;
margin-left: (how many pixels between the dropdown and your page
^ Best to add this only if position is absolute
text-align: center;
padding: 10px;
}
State if you need help with your javascript
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
I'm working on a fancy menu of some sort, but cant seem to get my head around a problem currently facing. Here's a image to illustrate the problem:
The whole thing is built using a nav tag that has a ul with li children.
Basically the right box thingy has to always stay on the top row, right edge, and when the windows is shrunken or smaller, this position/behavior has to maintain, and the other regular menu items should collapse on the second row.
The 2 boxes have to maintain a order: the one on the left is the first li element, and the one on the right is the last li element
Here's what I've tried so far:
-position absolute wont cut it, because it will indeed stay on the right, but it may or may not overlay the other elements(current situation);
-floating it, will probably collapse with the other elements on the next row
-adding a padding right to the nav or ul tag, will work, however, the other menu items will always have a right margin that wont allow them to ever fall under the right boxy thing;
Heres a js fiddle to the problem(shrink the results window): menu issue
I'm open to any ideas, even changing the whole markup if that's the solution, or some fancy js if its working. Thank you!
The markup used:
<nav class="secondary-navigation main-section">
<ul class="align-left secondary-navigation-list">
<li class="menu-item-block">
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li>
Menu Item
</li>
<li class="menu-item-block menu-last-item-block">
</li>
</ul>
The css used:
a{
text-decoration: none;
color: #656565;
padding: 10px;
font-size: 1.4em;
line-height: 50px;
}
.menu-item-block{
width: 50px;
height: 50px;
background: #656565;
}
.menu-last-item-block{
position: absolute;
top: 0;
right: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
}
nav.secondary-navigation{
position: relative;
display: inline-block;
width: 100%;
}
nav.secondary-navigation:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: #656565;
}
ul.secondary-navigation-list:after,
ul.secondary-navigation-list:before{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #656565;
}
ul.secondary-navigation-list:before{
left: 0;
}
ul.secondary-navigation-list:after{
right: 0;
}
You can do it by a little manipulation on the html and css:
change the order of the li so that the 2 special ones are on top
<ul class="align-left secondary-navigation-list">
<li class="menu-item-block">
</li>
<li class="menu-item-block menu-last-item-block">
</li>
<li>
Menu Item
</li>....
Change the css rule for secondary-navigation-list
.menu-last-item-block{
float:right;
}
see fiddle: http://jsfiddle.net/CLtCL/12/
Basically I've made a really nice navbar and all, however the dropdown I made isnt working, it shows on hover over my Community tab, but dissappears when i try and hover onto it :(
Does anyone know how i can fix it?
Here is my code:
<div class="navigation">
<ul class="navigation_items">
<li class="active">Home</li>
<li>What we do</li>
<li>
<a>Community</a>
<ul>
<li><a>Forums</a></li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Check the css code in the jsfiddle
http://jsfiddle.net/8a92u/
Push the sub menu bit over the main li so it retains the menu on hover.
Add margin-top:-10px to sub menu ul and padding-top: 10px to get it back to the same UI out look.
.navigation_items ul {
background-color: rgb(28, 28, 28);
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-top: -10px;
padding-top: 10px;
}
DEMO
Use this:
.navigation_items li:hover > ul,
.navigation_items li > ul:hover {
display: block;
margin-top: -10px;
}
instead of this:
.navigation_items li:hover > ul {
display: block;
}
.navigation_items ul {
display: none;
margin-top: -10px;
}