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%;
}
Related
I recently took over a WordPress site and the sub menu wasn't appearing at all. I fixed that with a li:hover style but now the sub menu appears behind the hero area. Played around with z-index to no luck.
Here's my two styles:
.main-header .main-navigation li ul {
display: none;
position: absolute;
top: 20px;
padding-top: 0px;
text-align: left;
font-size: 1em;
}
.main-header .main-navigation li:hover ul {
display: block;
z-index: 9999999999;
}
Site in question: http://brashind.com/
How about adding overflow visible to the header, like so.
<header class="main-header" style="overflow: visible;">
I would also add background-color: white; to the sub-menu class if your going to do that, so the sub menu text is visible against the hero.
This is because, you have a overflow: hidden; for .main-header class, on this css file: wp-content/themes/brashindustries/css/modules/header.css - line 28. You can either remove that line (not recommended - as an update to theme file will remove your modifications), or override it like:
header.main-header {
overflow: visible;
}
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}
I want to display a link in a mobile menu that is hidden in the regular page navigation. I removed the “Home” navigation link
<li id="home-menu">HOME </li>
from the regular webpage view in styles.css Line 60, using an alternative to display:none, discussed here: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont.
#home-menu {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Now, I want to enable the "Home" link in the mobile menu list. On Line 176 of styles.css, I tried to display #home-menu,
#home-menu {
display: inline-block;
}
but it will not show in the responsive menu. I am really trying to avoid using !important. I would appreciate learning how to resolve this. My example is at http://nspowers.org/ask/display/
You have a lot going on here, so without going into too much detail I'll suggest a cleaner alternative:
Remove the absolute positioning and its associated rules and instead use display: none; to hide #home-menu initially - then add display: block; at the mobile break point to have it re-appear:
header#topnav nav ul li#home-menu {
display: none; /* Also remove the !important rule from here */
/* position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; */
padding: 0; border: 0;
}
To have home re-appear for smaller devices:
#media only screen and (max-width: 579px) {
header#topnav nav ul li#home-menu {
display: block;
}
}
This seems like a simpler more maintainble solution, plus you won't need to override so many rules.
Read up on selector specificity if you're confused about how it works - see: http://www.w3.org/TR/css3-selectors/#specificity, http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ and https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more.
You're clipping it and have a height and width of 1px, so you need to override these properties as well:
#topnav nav ul li {
float: none;
margin: 0;
clip: auto; //reset clip to not clip
height: auto; //allow height to expand
width: 100%; //matches rest of menu elements
position: relative; //allow to flow above rest of elements instead of overlap first one
}
You also have this at line 117, which is overriding your display: inline-block because of the specificity of the selectors you are using. You can see this in the developer tools:
#topnav nav ul li {
display: block;
float: left;
font-size: 1.7em;
margin-right: 30px;
}
I have a some drop-down menus set up here: http://emgraphics.net/sokoleye_wp The problem is they only work sporadically - three out of four times I can't click on a link and the menu disappears. However, there isn't any pattern - no page where it works regularly (or doesn't), no particular menu/link that does or doesn't work, sometimes it works on the first try, sometimes not at all until I switch pages. The problem seems consistent across browser/platform (I tried a bunch of options in Browserstack). Even IE follows the pattern! These are just a standard menu set up in WordPress. I assume there must be some css somewhere that is interfering, or something with the random images in the header? But why wouldn't it just stay broken/non-functional (or not)? Any idea what I am missing here? thanks!
For me (Chrome Version 26.0.1410.64 m) there is a gap between the menu items and the drop-down list. When the cursor hits this gap it is not in a hover state over the button or the list, causing the list to disappear.
Try changing the CSS for #access ul ul to:
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
padding-top: 4px;
}
..that should fix the issue.
You could add a border top to the above example if you still want to have the visual effect of a gap. Replace your existing CSS for the element below and it should fix your problem.
#access ul ul {
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
border-top:4px solid #7C7461;
}
I am having a problem with the way my horizontal sub navigation in IE9.
This page the navigation renders great in all the rest of browsers but in IE9 it ignores the style given to the list items and pushes the subnav up against the top nav.
Here is the link to the page I am working on:
http://test.shared-vision.net/menu_test.html
and here is the link to the css"
test.shared-vision.net/css/menuestyle.css
Any sugggestions are appreciated.
On your rule #menu li.selected ul you need to set a bottom value:
#menu li.selected ul {
bottom: -40px; /* this will make it appear in the right place */
display: inline;
float: right;
padding: 0;
position: absolute;
right: 0;
width: 150%;
}