CSS – Getting rid of transparent box - html

After creating a navigation bar, I discovered a transparent box around it, which has some transparent features. Though it's not strikingly noticeable, I would still like to remove it. I've attached an image and the CSS code. I think the .menu tag is creating the transparent box, but I don't know how to remove it.
/* Navigation */
.clearfix {
width: 595px;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 80px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
position: absolute;
top: 5.5%;
left: 55%;
}
.menu {
width: 100%;
margin: 0px;
right: 10px;
}
.menu li {
margin: 0px;
list-style: none;
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.menu a {
transition: all linear 0.15s;
color: #ffffff;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration: none;
color: #000000;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/* Top Level */
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 1em;
}
.menu > ul > li > a {
padding: 10px 30px;
display: inline-block;
text-decoration: none;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background: #ffffff;
}
/* Bottom Level */
.sub-menu {
width: 140%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #ffffff;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu li {
display: block;
font-size: 1em;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
color: #000000;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #e0e0e0;
}

I played around with it a little and figured it out, but anyone else can feel free to comment if my answer isn't satisfactory.
The problem was actually caused by the .menu-wrap tag, and all I had to do to remove it was remove the box-shadow: 0px 1px 3px rgba(0,0,0,0.2); attribute I added to the code. It seems this transparent box had problems with the box-shadow property.

Related

Dropdown hover menu not showing up in IE/Edge

I'm using the theme Illdy on a Wordpress site handed to me, and the hoverable dropdown menus on the top navbar are not dropping down in IE or Edge. Firefox and Chrome appear to work.
I've tried adding a variety of these to the additional CSS:
#header .top-header .header-navigation ul li:hover > ul.sub-menu {
visibility: visible;
}
.header-navigation .menu > li:hover > ul {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
.header-navigation .menu-item>li>ul li:hover>a {
opacity: 1;
}
to no avail.
The theme's original CSS pertaining to the top navbar menu is:
#header .top-header .header-logo {
display: block;
font-size: 60px;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
line-height: 75px;
font-weight: 700;
}
#header .top-header .header-logo:hover,
#header .top-header .header-logo:focus {
color: #f1d204;
text-decoration: none;
}
#header .top-header .header-navigation {
float: right;
}
#header .top-header .header-navigation ul {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#header .top-header .header-navigation > ul {
margin-top: 20px;
}
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 40px;
font-weight: 700;
font-size: 14px;
color: #fff;
position: relative;
float: left;
font-family: "Lato";
}
#header .top-header .header-navigation ul li:first-child {
margin-left: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children a {
padding-right: 16px;
position: relative;
margin-bottom: 20px;
display: inline-block;
}
#header .top-header .header-navigation ul li.menu-item-has-children a:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 16px;
position: absolute;
top: 0;
right: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
width: 200px;
margin: -5px 0 0;
padding: 0;
position: absolute;
left: 50%;
display: none;
z-index: 10;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu:before {
display: block;
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -3px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
width: 0;
height: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
transform: translateX(0);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu:before {
display: none;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:first-child {
padding-top: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:last-child {
padding-bottom: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a {
width: 100%;
margin: 0;
padding: 0 10px;
line-height: 40px;
font-weight: 400;
font-size: 14px;
color: #8c9597;
text-transform: none;
display: block;
font-family: "Lato";
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:hover > a,
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:focus-within > a {
color: #f1d204;
border-left: 3px solid #f1d204;
background-color: #f8f8f8;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:after {
display: none;
}
#header .top-header .header-navigation ul li a {
color: #fff;
font-size: 16px;
line-height: 26px;
}
#header .top-header .header-navigation ul li:hover a,
#header .top-header .header-navigation ul li:focus-within a {
color: #ffde00;
text-decoration: none;
}
Add <meta http-equiv="X-UA-Compatible" content="IE=9"/> between the head tags. I personally used this and I had no problems with either IE or Edge. You should also check the syntax which could be read differently and wrong.

Why aren't nav bar buttons centered?

I have the code there
My question is, why aren't the buttons for different pages centered? This is more obvious when the site is minimized.
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
h1,h3 {
text-align: center;
color: white;
}
li{
list-style-position: inside;
display: inline;
padding-left: 12px;
}
a{
padding: .2em .1em;
color:grey;
background-color: ;
}
}
.xy{
margin-top: 75px;
}
h1{
font-size: 45px;
}
h3{
font-size: 23px;
}
body{
background-color: #451255;
}
nav {
width: 70%;
margin: 0 auto;
background: #fff;
padding: 15px;
box-shadow: 0px 5px 0px #dedede;
position: center;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #451255;
}
}
.btns,
.fill{
margin: auto;
position: center;
display: block;
}
So, I have that code, you can see on the link what it looks like. My problem is that it's not centered. And when I minimize it, the fact that it's not centered is more obvious. How could I fix that?
like #junkfoodjunkie already said, it's about basic CSS reset.
why? elements got initial CSS set, this is what's going on:
like you can see, your menu's items (blue part) are already centered but you've got initial -webkit-padding-start: 40px; (green part) and it's do the same as padding-left: 40px;, it takes not less than 40px from your menu so that's why it looks like the menu's items are not centered/stick to the right, so in order to fix it you need to overwrite the value of the <ul> element.
you're also set the <li> elements to padding-left: 12px; so the menu's items will not be centered perfectly. if you're not going to use some CSS reset then add .fill > ul {padding-left: 0;} to your CSS.
You're not resetting or eliminating default behavior. You have no margin or padding defined on the <ul>, and you have not reset the CSS to begin with, so there is a default padding and margin messing with you. Put margin: 0; padding: 0; on your <ul> and it should work.
Or, just do a full brutal reset: https://jsfiddle.net/efv8x1x2/1/
Added
* {
margin: 0;
padding: 0;
}
to the beginning of the stylesheet, and voila, centered.

White space before sub menu, what's wrong?

In this site I have a problem with the submenu that appears in the main navigation, there's a space before the list with the links I don't know why it changed but it appeared fine before, I really don't have an idea of what happened
#navigation {
float: right;
}
#navigation li {
float: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
}
#navigation li strong {
font-weight: 400;
border-right: #e8e8e8 1px solid;
display: block;
padding: 10px 20px;
}
#navigation li a {
padding: 20px 0;
color: #1c1c1c;
text-decoration: none;
display: block;
}
#navigation li:last-child strong {
border-right: none;
}
#navigation li span {
display: block;
color: #a09d9d;
text-transform: lowercase;
letter-spacing: 0.01em;
margin: 5px 0 0 0;
}
#navigation li a:hover span,
#navigation li:hover span,
#navigation li.current-menu-item a span {
color: #1c1c1c;
}
#navigation li li.current-menu-item,
#navigation li li.current_page_item,
#navigation li li:hover {
border-bottom: none;
}
#navigation li li,
#navigation li li:hover {
text-transform: none;
letter-spacing: 0;
border-bottom: #e8e8e8 1px solid;
}
#navigation li li a.sf-with-ul:after {
background: url(../images/arrows2.png) no-repeat;
width: 8px;
height: 8px;
content: '';
position: absolute;
top: 36%;
right: 1em;
}
#navigation li li a {
padding: 15px 20px;
background: #fff;
font-size: 13px;
}
#navigation li li a:hover {
background: #fafafa;
}
#navigation .current-menu-item,
#navigation .current_page_item,
#navigation li:hover {
border-bottom: 4px solid;
}
#navigation li ul {
box-shadow: 0 0 4px rgba(136, 136, 136, 0.6);
}
Seems like the top attribute value is just to high, change it to 93px
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 93px;
z-index: 99;
}
Here is an another possible option from Bart:
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 100%;
z-index: 99;
}
This seems to work too.
#navigation ul {
position: absolute;
width: 19em;
top: -999em;
margin-top: -39px;
}
In situations like this, i suggest you to use Firebug or Developer Tools integrated on your browser. A very little check using the Inspector tool (found in all developer tools and on Firebug) could have shown you how to resolve this problem very easily.
Or.......
Just remove:
top: -999em;
from:
#navigation ul {
position: absolute;
/* top: -999em; */
width: 19em;
}

In css menu bar, list item becomes vanished when move to it?

I am working on css menu bar. Everything working fine but when we leave the parent menu then list items of that parent becomes vanished. So please give me exact code to rectify this problem.
Code:
.menu li {
float: left;
position: relative;
}
.menu li a {
display: block;
vertical-align: middle;
text-decoration: none;
height: 34px;
}
.menu ul {
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}
.menu ul li {
float: none;
z-index: 100;
background-color:#FF7F50;
}
.menu ul a {
white-space: nowrap;
}
.menu li:hover ul {
box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4);
left: 5px;
opacity: 1;
z-index: 100;
}
.menu li:hover ul a {
box-shadow: none;
z-index: 100;
}
.menu li:hover ul li a:hover {
box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.3);
z-index: 100;
}

Css drop down/up menu with margin bottom

I've got a simple dropdown css menu, which is positioned in the footer and with upwards direction - fiddle: http://jsfiddle.net/RmTpc/11/
i would like for opened menu to have some bottom margin from the main li ("Items"), but when i apply margin-bottom: 30px to the ul.dropdown ul, opened menu dissapears on hover.
I've googled and also tried answers from stackoverflow:
Drop down menu with margin-top
How to use (top) margin with CSS3 drop down menu?
but can't get it to work. Any help appriciated, thanks :)
EDIT: Sorry, posted wrong fiddle before, updated the link above.
The problem lies with the margin - it's effectively 'dead space' so you're not actually touching it when you move the mouse up towards it.
I think the best solution is to remove the margin, and add the 30px to the bottom padding of the ul (so you're touching it when you mouseover), and remove the background color:
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding: 20px 20px 50px;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
(see http://jsfiddle.net/RmTpc/3/)
You'll probably need to adjust the padding of the list items to make up for the lost background space, but this solution should work for you.
EDIT:
Using the updated JSFiddle, you'll need to move your borders to the 'li' elements as well. See the New JSFiddle I set up, or this code:
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding: 20px 20px 50px;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
ul.dropdown ul li {
float: none;
background: #fff;
border: solid 2px #bbb;
border-top: none;
border-bottom: none;
}
ul.dropdown ul li:first-child {
border-top: 2px solid #bbb;
}
ul.dropdown ul li:last-child {
border-bottom: 2px solid #bbb;
}
Have a look at following CSS:
http://jsfiddle.net/RmTpc/15/
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
height: 100%;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background: #222;
z-index: 999;
padding-left: 40px;
}
ul#nav {
font-family: Arial, Helvetica;
font-weight: 300;
}
ul.dropdown, ul.dropdown li {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.dropdown {
float: left;
position: relative;
z-index: 999;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
min-height: 1px;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
cursor: default;
position: relative;
z-index: 600;
}
ul.dropdown ul {
left: 0;
position: absolute;
top: 100%;
visibility: hidden;
z-index: 999;
margin: 0;
width: 300px;
padding-bottom: 30px;
padding-left: 0;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
filter: alpha(opacity=0);
}
ul.dropdown li:hover > ul {
visibility: visible;
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
opacity:1;
zoom: 1;
}
ul.dropdown ul li {
float: none;
background: #fff;
border-left: solid 2px #bbb;
border-right: solid 2px #bbb;
padding-left: 20px;
padding-right: 20px;
}
ul.dropdown ul li:first-child {
border-top: solid 2px #bbb;
padding-top: 20px;
}
ul.dropdown ul li:last-child {
border-bottom: solid 2px #bbb;
padding-bottom: 20px;
}
ul.dropdown ul ul {
left: 99%;
top: 1px;
}
ul.dropdown-upward ul {
bottom: 100%;
top: auto;
}
ul.dropdown li {
color: #fff;
background: #222;
padding: 7px 10px;
}
ul.dropdown li.hover, ul.dropdown li:hover, ul.dropdown li.on {
color: #bbb;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #000000;
text-decoration: none;
}
ul.dropdown a:hover {
color: #000000;
}
ul.dropdown a:active {
color: #FFA500;
}
ul.dropdown ul li {
font-weight: normal;
}
Your menu will look like you have done it so far. One difference is that I replaced the margin with padding.
UPDATE: I have updated the CSS Code
Put the margin-bottom: 30px in the ul.dropdown ul li block and not for ul.dropdown ul. I think that'll make it work.