Searched everywhere, tried several techniques, but haven't found a workable answer yet.
Goal: Display a 'pin' background image when hovering over the navigation item.
Issue: Part of pin disappears when it extends past the a:hover tag because the background image is taller than the item
Current css is below. All parent elements are set to overflow: visible
.menu-primary a {
display: block;
padding: 6px 0 6px 0;
text-align: center;
width: 184px;
height: auto;
margin: 0 5px 0 5px;
position: relative;;
overflow: visible;
}
.menu-primary li#menu-item-23 a {
background-color: #dfe6ab;
margin-left: 0;
overflow: visible;
}
.menu-primary li#menu-item-23 a:hover,
.menu-primary li#menu-item-23:hover a {
background: url(images/pin.png) no-repeat left 0px top -7px;
background-color: #dfe6ab;
color: #000000;
overflow: visible;
height: auto;
}
All suggestions welcome. Thank you.
Background's in CSS don't act like Html Elements. If you need the anchor to display it, but the anchor is too small. You'll need to change the size of the anchor tag to the size of your image. Otherwise you can change the background-size of the image inside to fit within the anchor.
Also, you've got a duplicate semi-colon(;) in .menu-primary a, see:
position: relative;;
Related
I would like to know how would I dynamically increase the width of the user menu(which is an image), which could take any length of the menu item name. I am using below code.
The menu items in the user menu are shown on a image. Below is the code. Please let me know where should I make the changes. I am trying to use but I am failing to add menu items with large names(they overflow from the menu bar).
user-menu ul li ul {
background: url("naviagtion-dropdwnbackgrd.png") no-repeat scroll left -30px transparent;
border: 0 none;
clear: left;
float: left;
left: -105px;
list-style-image: none;
padding: 15px 11px 0 0;
position: absolute;
top: 17px;
width: 145px;
z-index: 8; }
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
I am creating a simple horizontal navigation. Trouble I'm running into is when I am adding a css triangle to the "active" page using <after> pseudo element, the overall <li> height for that item is increasing, which throws the whole bar off.
I'm sure I'm just overlooking something, but I've tried troubleshooting it and the solution is eluding me. Any help would be very much appreciated!
Here is a codepen: http://codepen.io/joshmath/pen/HiBvd
the :after element takes up space when it is positioned relatively, so there are two things you can do.
1) set the height of the <li>:
nav ul {
li {
height: 1em; // 1em == the height of one line of text
overflow: visible; // not required, but good to have
}
}
2) position the pseudo element absolutely (I typically do this)
nav ul {
li.current {
position: relative;
&:after {
position: absolute;
top: 100%; // align the top of the pseudo element with the bottom of li.current
left: 50%; // center
margin-left: -6px; // half the width of the pseudo element to correct the center
// your styles:
content: '';
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3ad2bc;
}
}
}
You just need to add a position relative to your menu item, then the after can be positioned absolute, then it won't affect your height.
Code Snippet below
nav ul li.current{
position:relative;
a{
color: #3ad2bc;
}
&:after{ //colored triangle
content: '';
width: 0px;
height: 0px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #3ad2bc;
margin-left: 0;
position:absolute;
bottom: -10px;
left:50%;
margin-left:-12px;
}
}
check this codePen
I adding a
position: relative;
text-align: center;
in li properties and position absolute in pseudo element added
I am facing some weird layout/positioning issues in my webpage. It has mostly to do with floated items and container borders that don't flow right. I have tried clearing and overflow: auto, hidden but it still does not work.
Thanks alot in advance.
Add overflow: auto; to .explore-inner
.explore-inner {
border: 1px solid #EBEBEA;
background: url(../images/inner-bg.png) repeat-x;
overflow: auto;
}
Your <ul> items have a float, this is not cleared correctly. Right after the <ul> items in .explore-inner you have have a clear: both;
Add this following css
.explore-inner:after{
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
clear:both;
}
because "ul" has floating it needs to be cleared after the "explore-inner" class
Actually you have used floating in your child div's not cleared your parent div's so i have given the overflow:hidden to your parent div so its working fine now....
So you can update your css with mine one i hope this will work for you :-
CSS
.explore-inner {
background: url("../images/inner-bg.png") repeat-x scroll 0 0 transparent;
border-top: 1px solid #EBEBEA;
overflow: hidden;
}
#team-message {
background: url("../images/outer-bg.png") repeat-x scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 10px;
width: 940px;
}
I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.
I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
However, this is clearly not ideal, as the menu needs to be dynamic...
Is there a way to achieve what I want via CSS? I hope so!
I am using the Superfish menu that comes with Theme Hybrid for Wordpress.
Thanks in advance for any help you can offer!
I get your point .. let's see again.
This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.
However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}