I'm using Avada version 3.2.1. Here's my site: Link
The drop-down items under the main nav menu items are too far below when they pop out and are difficult to click. Try mousing over "About" and clicking an item below to see.
How can I fix this? I couldn't find the right bit of CSS to edit.
Update this in your custom css to be 40px instead of 43px:
#nav ul ul {top: 40px;}
You can add your css with this :) It will fix your problem.
#nav ul ul {
top: 35px !important;
}
Related
How can I add sub-menu under actual sub-menu in WordPress?
On one of my website, I want the coral coloured menu (which contains The Sciences, Accreditation etc) to have sub menus when you hover over it. I can't create a sub menu of this as the coral coloured menu is actually a sub menu within wordpress. The top menu being the "why, how, what, who" menu at the top.
*If you check, DISC should be as sub-menu (dropdown) under The Sciences but not working as it should be.
Any help would be highly appreciated.
Many thanks,
~ Dipak G.
You can simple drag and drop the sub-menus under the sub-menu. Sub-menus can be pages, custom-link and anything from left side of menu page. And then css of a accordingly.
the series would be:
The science
sub-menu(of science)
sub-menu a
sub-menu b
sub-menu b
Accreditation
sub-menu(of Accreditation )
sub-menu c
sub-menu e
sub-menu f
and so on
and if you want css then tell me.
add this css in your theme and css accordingly:
.sub-menu-corel .sub-menu {
display: none;
position: absolute;
top: 100%;
width: 180px;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0;
z-index:999;
}
.sub-menu-corel .sub-menu li{
width:100%;
}
.sub-menu-corel .sub-menu li a{
display:block;
width:100%;
color:#111;
}
.sub-menu-corel .sub-menu li a:hover{
color:#111;
}
this is updated css
You can do it by drag n drop by going
Appearance => Menu
Just place it as sub-menu of sub-menu.
I created a dropdown menu for my Wordpress website. In this jsfiddle you can find the HTML and CSS code: http://jsfiddle.net/N5H4c/
see jsfiddle
I have a CSS problem there. I created the dropdown menu but when I hover 'Menu item One' it stretches and gains more width. That should not be. The sub menu items can be larger but the menu item itself shouldn't change the size. Further there is this yellow background everywhere around it when I hover the menu and I would like to remove it.
You need to update
#menu ul {
position: absolute;
background: #f7e600;
}
check jsfiddle
http://jsfiddle.net/N5H4c/5/
Add
position: absolute;
top: 38px; // your menu's height
left: 0;
white-space: nowrap;
to #menu ul : http://jsfiddle.net/N5H4c/2/
CSS Dropdown menu does not stay visible on mouseover. I tried searching the answers but no codes work thus far. Here is the url: http://delawaresign.com.previewc40.carrierzone.com/about.html
but here's the clincher. It works FINE on another URL i made with the same flipping code!
http://delawaresign.com.previewc40.carrierzone.com/index-01-14-13.html
I can't figures this out! Why will it work on one but not the other??
It "shows" visible, but doesn't "stay" visible.
The problem is that you have a space between the menu item and drop down list. Put the drop down in other color and you will see the space.
The easiest solution to this is to remove this space putting the list up. Try to change the top: 2.5em to top: 1.5em in .sf-menu li:hover ul which is inside superfish.css file:
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 1.5em;
z-index: 99;
}
I've read replies for similar problems to mine, and I believe I've tried the steps mentioned but I'm still having problems with my dropdown menu disappearing when mouse off.
I've removed the formatting of the dropdown just so the code is bare bones, please take a look:
http://freerange.wesleypearce.co.uk
If you mouse over past productions you'll see my problem.
Thanks in advance for what probably is quite a simple fix, it's just alluding me!
Cheers,
Wes.
In the rule for your dropdown uls, use padding-top: <#>px; rather than top: 45px; to put spacing between the menu header and your list. The top value should be no more than the height of the menu header, otherwise you'll create a gap between it and the list, which will remove the list's visibility as soon as the cursor moves off the header and over the gap.
Try this one on style.css line 89
I have changed the top position of ul. The problem is there is a gap between your a tag (Past Products) and dropdown ul
#menu ul ul {
margin: 0 auto;
position: absolute;
top: 40px;
visibility: hidden;
width: 90px;
}
You're pushing your submenu too far from your main menu item, just declare it 100% to push your submenu exactly below your main menu item to fix the problem:
#menu ul ul {
top: 100%; /* fix */
}
I have an issue with a dropdown menu that is appearing too much to the left of its parent menu.
Here: http://dev.gratefulhearttherapy.org/
Hover the menu 'Services'
in the nav bar
See the dropdown menu appearing too much to the left (compare with the menu 'About Us')
I'm a bit confused with the positioning since the CSS for the nav menu wasn't done by myself for the most part. I would really appreciate some help with it.
Thanks!
If you set position: relative on the top menu container and remove the left: 142px on the sub-container, you'll be aligned left.
.custom ul.mega-menu li {
position: relative
}
.custom ul.mega-menu li .sub-container {
left: 0
}