I'm a newbie; need some help! I created a left-aligned navigation menu with a slide-out submenu. I'm happy with everything except for the sub-menu's height. How can I make the entire slide-out menu (the opaque one) go to 100% height of the entire screen? Want it to look like this: http://perezweddings.com/blog/
Here's my jsfiddle: http://jsfiddle.net/alh3168/hE6Sv/10/
Do I need to change something in here?:
div.menu ul.second li a {
width: 150px;
bottom: auto;
min-height: 100%;
background-color: #B2CC7F;
color: #00293E;
text-decoration: none;
display: block;
padding: 7px 10px 0 0;
text-align: left;
cursor: pointer;
cursor: hand;
background: #000;
background-color:rgba(0,180,180,0.3);
padding-left:20px;
font-family: Neou-Bold;
src: url('Neou-Bold.otf');
font-size:10px;
letter-spacing:1.6px ;
}
Right now the color is on the sub-menu anchors. We need to move that to the parent ul.second element, and then add CSS to make that element fixed and span from the top to the bottom.
div.menu ul.second {
background-color:rgba(0,180,180,0.3);
top:0;
position: fixed;
bottom:0;
}
Once that has been done, we need to update the anchor style to set the background color of sub-menu items to transparent by default since the background color is coming from the parent element.
div.menu ul.second li a {
background-color:transparent;
}
You'll probably want to add some padding to the div.menu ul.second element as well and there are some other things you may want to adjust, but you can quickly add this CSS to the bottom of your fiddle to see it working.
Related
I've been trying to make the icon's background (from Material-UI) the same color as the rest of the list items when hovered over.
Not sure why the CSS does not apply to both the icon and text when the overall class (className= "dd-content-item") is being styled. Any help is appreciated thank you!
CSS:
/*This styling applies to each list element in the dropdown-content*/
.dd-content-item {
color: #1D3557;
padding: 12px 16px;
text-decoration: none;
display: block;
list-style-type: none;
cursor: pointer;
justify-content: center;
background-color: none;
}
/*Hovering over a list element in the dropdown menu colors it darkly*/
.delete-icon, .archive-icon{
position: relative;
top: 6px;
}
.favorite-icon, .tag-icon {
position: relative;
top: 7px;
}
.dd-content-item:hover {
background-color: #D3EDEE;
}
/*When you hover over the dropdown-content, it is displayed as a block*/
.dd-wrapper:hover .dd-content {
display: block;
}
Code showing hierarchy in html
Image of hover action
What kind of icon are you using? Is it an image or SVG or what? Chances are your image doesn't have a transparent background.
Otherwise, something like this might help;
.dd-content-item:hover,
.dd-content-item:hover .delete-icon,
.dd-content-item:hover .archive-icon,
.dd-content-item:hover .favorite-icon,
.dd-content-item:hover .tag-icon {
background-color: #D3EDEE;
}
Hard to diagnose or say really as I can't see how those images work or what type of object they are.
This page, on the top right, you'll see "English" if you hover over it you'll see a list of languages. You don't have time to get to the last language, the popup disappears. Basically this ul opens when you hover over #lang-select
#lang-select.header .block-content ul {
list-style-type: none;
padding: 10px 20px;
margin: 0;
background: #FFF;
}
I tried adding
#lang-select.header .block-content ul {
transition-delay: 3s;
transition-property: background;
}
also, I tried transition-property: padding; Also I tried applying transition-delay to #lang-select directly, did not work
The problem is with the z-index. The wrapper is going over the drop down menu so once your cursor moves from the header to the wrapper it thinks your hovering over the wrapper rather than the languages.
In the css add
#header {
z-index: 1000
}
I try to have a sticky navbar with a dropdown-menu.
But the dropdown-menu is not showing.
I player around with this for too long now i guess.. and the biggest problem: in jsfiddle the dropdown-menu is now showing at all. However at my pc the dropdown-menu is showing as long as the 'sticky' class is not added, then becomes invisible, too.
Here in stackoverflow I read about overflow:hidden in the navbar causing the problem. Deleting that makes the dropdown-menu work but the navbar disappears.
-> dropdown-menu invisible
https://imgur.com/JYcswYq
-> navbar not shown
https://imgur.com/Gk5P6gN
I assume the error somewhere here but couldnt figure it out..
#navbar{
overflow: hidden;
font-size: 25px;
background-color: #333333;
}
main{
padding-top: 30px;
padding-bottom: 30px;
}
.dropdown-content {
right:0;
display: none;
position: absolute;
background-color: #333333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 48px;
}
There you can find a reduced part of my code. Here the dropdown doesnt show at all. (at my pc it at least shows as long as the sticky-class isnt added)
https://jsfiddle.net/xncjazky/3/
Hopefully i can get any advice on how to make the dropdown-menu popup even with the sticky-navbar.
Thank you.
Remove the overflow:hidden as you found out yourself, and add a height or min-height property to the #navbar selector, like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
min-height: 48px;
}
The problem occurs because of the use of floats in your navigation items.
So another way to solve the issue without setting a fixed height to the #navbar, is changing your navigation items from float:left to display:inline-block.
Like so:
#navbar {
//overflow: hidden;
font-size: 25px;
background-color: #333333;
}
.lnav{
//float: left;
//display: block;
display: inline-block;
padding: 10px;
text-align: center;
color: #d9d9d9;
text-decoration: none;
cursor: pointer;
}
Hope this helps.
Cheers, Jeroen.
I had the same problem and solved it by placing the navbar inside the "div" element with "position: sticky".
For example:
<div style="top: 0; position: -webkit-sticky; position: sticky">
<nav>
<!-- here goes the code of navbar -->
</nav>
</div>
Removing overflow: hidden; will cause the background color of the main navbar to disappear if you have the li elements set to float: left; or float: right;.
I managed to fix the issue of content not appearing by making the .dropdown-content div class position: sticky; with the ul.topnav element. Problem is, a new glitch arises as the dropdown list appears with the background color assigned to it, acting as it should, except for one thing. The background color of the topnav list comes down around the dropdown, making the whole list fatter instead of showing a simple lonely dropdown menu.
I'm trying to add a margin to a radio label. I've changed the display style to block and added a bottom margin but it does not seem to affect the spacing at all, and overlaps with subsequent elements.
https://jsfiddle.net/wospyqah/
e.g.:
.slider-label {
position: absolute;
display: block;
cursor: pointer;
color: #5e5e5e;
text-align: center;
margin-bottom: 50px;
}
The issue is that the .radios-to-slider class is set to use position:relative, which takes it out of the normal flow of the document.
Instead of adding a bottom margin to that class, just add a top margin to the divinput class.
div.divinput {
margin-top:50px;
margin-bottom: 15px;
display: block;
}
See this fiddle: https://jsfiddle.net/uuzw5cwe/1/
I have a div with a fixed height. When I resize my browser window and the div's width becomes smaller, the elements inside the div jump below expanding the height. How can I make the elements visible by adding a horizontal scrollbar?
I have tried all CSS scroll properties, but could't make it work:
.dhButtonToolbar{
position:absolute;
top:6px;
left:0;
bottom: 5px;
width: 60px;
background-color:yellow;
border:0px solid white;
margin-left: 5px;
margin-right:5px;
margin-top: 5px;
}
#media screen and (max-aspect-ratio: 1/1) {
.dhButtonToolbar {
height: 55px;
left:5px;
overflow-y:auto; //here my elements jump below I want to add a horizontall scrollbar
right: 5px;
}
JSFidlee: http://jsfiddle.net/x7xm3/2/
Try resizing and elements will fall below!
Just add a body and give it a min-width. Is this what you wanted?.
Hope it helps.
I change in your jsfiddle. please check this.
jsFiddle: http://jsfiddle.net/x7xm3/16/
It completely working.please check.