I have an issue with this site made under Wolf CMS.
I dont know what happened, but the menu child items are not
showing anymore!. Cant understand why when I add CSS to allow
the display and style it, it doesn't work!
I dont see JavaScript code affecting it..maybe I'm missing something
can somebody advice??
http://goo.gl/PE238a
All the code via CSS i try to apply wont make any effect...
I cant figure out why my css wont render what I need to see...
#team-nav li {
background: none repeat scroll 0 0 red !important;
height: 100px !important;
left: 1px !important;
position: absolute !important;
top: 1px !important;
width: 100px !important;
}
I tried to position absolute and opacity 10 but wont work :(
At the wayback machine http://goo.gl/hYhuHB
i can see the working menu in a captured page of the site....
but there is so much addded code that I get confused..
You need to add the following style to your #nav
#nav {
position: relative;
z-index: 3;
float: left;
margin: 0;
border-bottom: solid 1px #ccc;
width: 700px;
padding-top: 100px;
overflow: initial;<-- Added
}
Since your overflow is hidden and you #nav is position:relative; the submenu which overflows your #nav cannot be displayed. Try the above code that works like a charm. You can also add overflow:visible;
NOTE: Your mobile.css inherits the values of your screen.css. #menu, #nav{overflow:hidden} so your screen.css has to change with #nav{overflow:visible}
Related
I'm making an website with DIVI, and used custom CSS code to skew and style the menu buttons, but now i have this strange effect on drop-down submenus when they are out of the style completely.
I was trying to apply same styles for drop-down items, but nothing seems to work.
Maybe anyone ran in this problem? You can check the website live - http://steel.cody.lt and the problem is with PRODUCT menu dropdown.
Add this css and try
#top-menu-nav #top-menu li li {
margin: 0;
padding: 0 0px;
line-height: 2em!important;
width: 100%;
transform: skew(-1deg);
}
#top-menu-nav #top-menu li li a {
width: 200px;
padding: 6px 0px;
width: 100%;
}
I have this website I'm making for my aunt.
I seem to have a problem with this menu.
When I put the browser on my 1920x1280 screen it's all perfect but when I put it on a lower resolution screen the menu bar goes out of screen on the right, but what is strange about this is is that my width is at 100%.
You can find the website here : mathiasotw.be
Thanks in advance.
P.S.: if you want the code i can post it . but normally u can see the code by right-clicking and inspecting it or pressing F12.
You have applied 20px padding for DIV with ID menu
change it to
padding:20px 0;
It should work for you.
Your new css should be looking like below:
#menu {
background: none repeat scroll 0 0 white;
box-shadow: 0 1px 6px black;
float: left;
height: 70px;
padding: 20px 0; // here padding was declared as 20px.
position: relative;
width: 100%;
z-index: 999;
}
I have not gone through your entire CSS file but seen these styles applied in firebug through #menu ruleset.
I have an issue regarding a div with overflow: hidden. It is positioned relative and it's child div is positioned absolute. On hover, the parent div changes from overflow:hidden to overflow:visible. This enables the child div to display properly.
The issue: although everything else works just great, when the mouse is no longer over the parent div (thus overflow is now hidden again), bits of the child div are still shown in their place. They are not actually displayed, because if I select some text or objects near them the dissapear completely. It's as if the page needs a "refresh" of some kind.
Has anyone else come accross this? I'm kind of stuck on this...
UPDATE: I made a jsfiddle with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...
<div class="list-name">
<ul>
<li class="truncated">
<a href="">
Hover me to see all the magic thext I'm hidding
</a>
</li>
</ul>
</div>
It would seem that an extra overflow:hidden added to the hyperlink solves the issue. Check it out in this fiddle.
That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:
http://jsfiddle.net/Nt5bN/13/
CSS:
.list-name ul {
margin: 50px;
padding: 0;
list-style: none;
}
.list-name li {
display: block;
float: left;
width: 60px;
height: 29px;
overflow: hidden;
background: #eee;
}
.list-name a {
width: 300px;
display: block;
float: left;
}
.list-name li.truncated:hover {
overflow: visible;
}
.list-name li.truncated:hover a {
margin-top: -3px;
margin-left: -8px;
background: #fff;
z-index: 9999;
padding: 2px 0 2px 7px;
border-radius: 3px;
border: 1px solid #ddd;
}
i have a div with overflow-y: hidden; and a have a pseudo element to the right of the buttons that i want to position outside the div but it will not work. here is the fiddle - http://jsfiddle.net/PAdSd/1/.
But if i give the div no overflow it will sit out of the div fine. Here is that fiddle - http://jsfiddle.net/PAdSd/2/.
Any help would be wonderful
Remove position: relative from .nav. You can see the results in this jsfiddle.
A similar problem had me banging my head against the wall for days. Trial and error and pure chance produced the solution. Not sure about cross browser compatibility, but it works in chrome and firefox (as long as you prefix your css3 properties with -moz).
Here's another way of solving this problem (especially useful when you can't just remove position:relative because of say, using height:100%; on the pseudo element):
To make the content visible, add padding to the bottom, say 10px;
Then to remove the paddings effect for other elements use margin-bottom:-10px;
So:
.nav{
background: transparent;
height: auto;
overflow-y: hidden;
position: relative;
/*new stuff*/
padding-bottom:10px;
margin-bottom:-10px;
}
It's hidden because that is what you have told it to do.
http://jsfiddle.net/PAdSd/3/
If you don't want it hidden, but still want overflow hidden then you will need to reposition it higher. .nav:after will put content at the end, but inside of the nav tag.
You can position it higher by adjusting the top css value.
.nav:after{
content: "";
border-radius: 5px;
background: #000;
width: 10px;
height: 10px;
position: absolute;
left: 500px;
margin-left: 1px;
top: 10px;
box-shadow: -5px 5px 0px #8f0222;
z-index: 20;
}
Or you might want to use body:after instead, because it doesn't sound like you actually want it inside the nav bar.
I need some help with some CSS coding. I have been trying to get this navigation menu to center on the page and no matter what I do, I cannot get it to work. I have tried padding-left, margin-left, text-align:center, and nothing works. The menu continues to remain more to the left than the right.
Here is a screenshot of the problem: http://i132.photobucket.com/albums/q38/blacktiphunter/center.jpg
I'm sure it's something very simple, but I just can't seem to figure out what I am doing wrong?
Here is the live link of the page: http://blacktiphfishing.org/test.html
Any help is greatly appreciated!
If you remove the
margin:0; from #nav
it looks centered.
Tested in Chrome
first add overflow:hidden for #nav, #nav ul to clear floats. Then add margin:0 auto .But this always require a fixed width, so set it, for example: width:760px So the new css is:
#nav, #nav ul {
list-style: none outside none;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
width: 760px;
z-index: 30;
}
CSS layouts can be a bit of a headache sometimes. Try using 'inspect element' in chrome or firebug in firefox to enable/disable and alter styles to get fine tuned adjustments
You need to specify the exact width of the MainMenu div and set his left-right margin to auto if you want to reach a correct centered layout.
The exact width would be 780px (150px * 5 (5 link each row) + 10px * 2 (10px left + 10px right border) + 2px * 5 (right margin of each li))
Use this css :
#mainMenu {
background: none repeat scroll 0 0 #000000;
border: 10px solid #000000;
color: #FFFFFF;
display: block;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
To get the nav section centered