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.
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.
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/
after 1 hour of try and error and searching for problems like this, i try to get an answer here.
I want to include a bootstrap Nav-Bar into a Div.
I centered the Nav-Bar, but now my Div is higher then the content. This problem is only available when the Nav-Bar is centered. If i let if float left, the space below the Nav-Bar isnt there...
Screenshot (i want to remove the red-striped part)
here my Code:
Code
a margin-bottom:0; will do the trick if added to navbar
.navbar {
margin-bottom:0;
}
This is a bootstrap example with both navbar and jumbotron
Try this:
#header {
color: white;
width: 100%;
background-color: #222222;
font-weight: 100;
margin: auto;
padding: 30px 0;
text-align: center;
font-size: 1.2em;
}
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.
I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:
http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar
You can scroll down or up in the content, but the navigation bar never goes away.
For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.
Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
}
#navigation li
{
display: inline-block;
width: 150px;
height: 110px;
cursor: pointer;
}
And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:
#container
{
position: absolute;
margin-top: 180px;
font-size: 25px;
width: 90%;
}
The reason it's going through is because you didn't set a background color to your navigation bar. Try that.
Edit: Looked at your source code. Replace navigation CSS in style.css file with this:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
background-color: #FFFFFF;
z-index:999;
}
The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.
You can use the property z-index:xxx, did you try that?
Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.
Have you tried to add data-role="header" ?
<div data-role="header" data-position="fixed">