I'm probably doing something wrong here. Here's my code for it:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000066;
z-index: 1;
}
.header {
position: fixed;
top: 0;
width: 100%;
overflow: auto;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .droptn {
background-color: #ccb3ff;
color: black;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ccb3ff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block, flex;
flex-flow: column;
justify-content: space-evenly;
flex-grow: 2;
text-align: left;
z-index: 3;
}
.dropdown-content a:hover {background-color: white; color: #000066;}
.dropdown:hover .dropdown-content {display: block;}
<ul class="header">
<li>Home</li>
<li>About Us</li>
<li>Request a Quote</li>
<li>Colors</li>
<li class="dropdown">Products
<div class="dropdown-content">
Address Blocks
Balls and Finials
Columns
Coping (Wall Caps)
Custom Products
Fireplaces
Lawn Edgers and Tree Rings
Panel System
Patio Stones and Pavers
Parking Bumpers
Pier (Pillar) and Tier Caps
Quoins
Sills and Lintels
Splash Blocks
Window and Door Trim (Surrounds)
Wainscots
</div>
</li>
</ul>
When my dropdown displays, it appears in the header with a tiny scrollbar, and it doesn't drop down out of the header. I know I'm probably an idiot, and this is likely a super easy fix. A picture of what I'm talking about. I've obviously tried messing with the z-indexes of the elements. It didn't do anything. I've googled my little fingers off, and I've been trying things out. Nothing is working. I'm a dummy, I know.
The issue you are having is that the overflow is set to auto, thus causing the scroll bar to appear when hovering over the dropdown and being larger than the allocated space. To resolve this, remove overflow:auto from header and ul.
See this fiddle for the working example.
https://jsfiddle.net/tdz018ug/
Related
I have 2 navs inline, and one of them is floating on the right side:
2 navs
I would like to center the text in the first nav but to the center of the screen instead of the nav itself. I thought that the easiest way to solve this would be to make the 2 navs overlap but I'm not sure. I was wondering if anyone could help me solve this problem?
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
}
header>nav:nth-child(1) {
float: right;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: left;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
You want the nav items to be centered in the bar, ignoring the width of the nav element to the right?
One way would be to use absolute positioning on the red nav to remove it from the flow of the page. By removing it from the flow, it's width/height will be ignored so you can center the rest of the items in the nav based on the whole screen.
Add some positioning to the red nav and make sure you set the header to be position: relative. Finally, change the text-align to center.
Be aware: By removing the red nav from the flow, it's possible that the other nav items may overlap the red nav depending on the screen size. Make necessary adjustments with media queries or some other solution.
header {
font-size: 10px;
letter-spacing: 1.025px;
background-color: black;
padding: 1em;
position: relative;
}
header>nav:nth-child(1) {
position: absolute;
top: 1em;
right: 1em;
bottom: 1em;
background-color: red;
padding: 1em 1em 1em 1em;
}
header nav {
color: white;
text-align: center;
}
header nav ul {
list-style: none;
display: inline-block;
position: relative;
padding: 0;
}
header nav ul li {
display: inline;
padding-left: 1em;
padding-right: 1em;
}
<header>
<nav>
MAGYAR |
ENGLISH
</nav>
<nav>
<ul>
<li>RÓLAM</li>
<li>ZENE</li>
<li>GRAFIKA</li>
<li>JÁTÉKFEJLESZTÉS</li>
</ul>
</nav>
</header>
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
Is there a way to hide the separator in the first element on each line?
I have a responsive horizontal menu that adds extra lines when the window becomes smaller.
To make matters worse, the end user can add and remove items from this menu, or just change the order of the menu items.
Using first-child is not an option, because that only works for the first line. When the screen becomes too small the following lines will have the separator on their first li element.
#block-views-solutions-block{
box-sizing: border-box;
text-transform: uppercase;
font-weight: bold;
width: 92%;
max-width: $maxWidth;
margin: 20px auto 0 auto;
padding: 15px 0 0 0;
background-color: $colorBlue;
.content{
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
ul{
margin: 0 !important;
padding: 0 40px;
text-align: center;
}
li{
display: inline-block;
padding: 0 !important;
&:before {
position: relative;
top: 0.125em;
display: inline-block;
width: 1px;
height: 1em;
border-left: solid 2px #fff;
content: " ";
}
&:first-child{
&:before{ border-left: none; }
}
}
a{
display: inline-block;
padding: 0 10px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h2{
color: #fff;
font-size: smaller;
padding-bottom: 5px;
}
}
Looks fine here:
Does not work for the 2nd or following lines:
Looks horrible on very small screens:
I've been trying out solutions on here and other websites, but none seem to do the trick.
I found a solution to this issue, with a couple of caveats:
The solution requires that the list be left- or right-aligned, and won't work with a centered list.
The solution requires that the ul element's overflow be hidden, which could pose a problem if you're also hoping to have dropdown menus.
The solution itself is very simple:
Use ::before or ::after to add the separator, depending on whether your nav is left- or right-aligned.
Position the separator relative to its initial position such that it sits outside its list item.
Use padding on the opposite side of the list item to create the space for its adjacent list item's separator.
Set overflow: hidden; on the ul element so that any separators which fall outside the container are hidden.
Here it is in action:
ul {
font-size: 0;
overflow: hidden;
padding: 0;
}
li {
font-size: 16px;
display: inline-block;
margin: 0;
padding: 0;
color: gray;
position: relative;
padding-right: 2rem;
}
li::before {
content: "|";
position: relative;
left: -1rem;
font-weight: bold;
color: black;
}
<ul>
<li>Item 1</li>
<li>Another Item</li>
<li>This Is Nice</li>
<li>Another</li>
<li>And Another</li>
<li>And Yet Another</li>
</ul>
I am implementing a very simple css menu. However, if I select a menu title in the menu bar (and thus open the menu associated with it) the width of the title extends to the width of the menu, which is not desired (i.e. the width of the title should not change). Check out the JSFiddle, or have a look at the markup:
<div id="menu">
<ul>
<li>you
<ul>
<li>register...</li>
<li>login...</li>
<li>forgot password...</li>
</ul>
</li>
<li>.</li>
<li>qan</li>
<li>.</li>
<li style="width: 20px"><a class="site">be</a>
<ul>
<li>be</li>
<li>do</li>
</ul>
</li>
</ul>
</div>
and the css definitions:
#menu {
font-family: Arial, Helvetica, sans-serif;
padding: 0px 5px;
font-size: 12px;
line-height: 18px;
color: darkgrey;
position: absolute;
top: 0px;
left: 0px;
height: 20px;
background-color: black;
z-index: 3;
/*opacity: 0;*/
white-space: nowrap;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
list-style-image: none;
}
#menu>ul>li {
font-weight: bold;
display: inline-block;
float: left;
padding: 2px 1px 0px 1px;
width: auto;
/*width: 10px;*/
}
#menu a { color: inherit; text-decoration: none;}
#menu>ul>li>a:hover { background-color: grey;}
#menu>ul ul {
display: none;
background-color: lightgrey;
padding: 2px 5px;
line-height: 14px;
min-width: 100px;
}
#menu>ul ul>li {
color: black;
padding: 2px 8px 2px 5px;
margin: 0px -3px;
}
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;}
#menu>ul>li:hover ul { display: block;}
Since the menus are generated dynamically and contents meant to change on the fly and the font used is proportional, I cannot just set the widths of a title to a constant value which suppresses the resize. The width of the title should be determinded solely by the width of the text.
It used to work when I had implemented yuimenus, but that did all kinds of stuff to my CSS, the ramifications of which I found hard to control, so now I cooked up the menu by myself and am quite happy with it, save for the width change, and I haven't figured out which part of yui suppressed that. Any suggestions?
I don't agree with max-width.. this will make the link's width content-independent
use position:absolute; for the submenu: jsFiddle
Set width in li
Your updated example :- http://jsfiddle.net/8U5An/8/
Css:-
#menu ul li {
width: 25px;
}
See some useful example as well , how they handle same case by using width only :-
http://www.diy.com/diy/jsp/index.jsp?noCookies=false
http://www.puregrips.com/
I'm trying to make a CSS drop down menu but the problem is that child list items overlap parent list items as you can see in the picture.
I found the source of the problem to be the padding: 10px 5px; in line 12 - When removed, the problem is solved. But I need the padding for the look. I read Inline elements and padding which addresses a similar issue but even the solution provided in the article - using float: left; instead of display: inline; - does not solve my problem.
Why does this happen and what is the solution?
HTML Code
<ul id="navigation_2">
<li>Home</li>
<li>About
<ul>
<li>Who We Are</li>
<li>Our Goal</li>
</ul>
</li>
</ul>
CSS Code
ul#navigation_2
{
margin: 0;
padding: 0;
list-style: none;
font-family: "Century Gothic","HelveticaNeueLT Pro 45 Lt",sans-serif;
}
ul#navigation_2 li
{
float: left;
position: relative;
padding: 10px 5px;
font-size: 114%;
text-align: center;
width: 100px;
}
ul#navigation_2 li a
{
text-decoration: none;
}
ul#navigation_2 li a:link, a:visited, a:active
{
color: black;
}
ul#navigation_2 li:hover
{
background-color: red;
}
ul#navigation_2 li ul
{
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul#navigation_2 li ul li
{
display: block;
width: 150px;
text-align: left;
}
ul#navigation_2 li:hover ul
{
display: block;
position: absolute;
background-color: #CBD966;
}
Here, I have a working example:
http://jsfiddle.net/hzCZY/2/
Never underestimate the power of inline-block! Basically your list was colliding with the text 'About' as opposed to the red box around the text 'About'. I formatted the actual a tag to be the red block instead, an inline-block, which then collided correctly with the ul below it.
If you need any more explanation I'd be more than happy to help.