So we're using Cherry Frameworks (ugh) with Wordpress. The third-level navigation is getting cut off. I've tried manipulating the CSS to fix the issue to no avail. There's no option in the framework.
The problem resides in the Services menu. Resize your screen smaller to view the issue.
My solution is to push the third-level nav to the left side instead of the right side. Thoughts on how to do this?
http://dev.torontofamilytherapist.com/
So using chrome's inspect element, I was able to figure out what needed to be changed:
#topnav li .sub-menu .sub-menu {
left: 100%;
margin: -10px 0 0 2px;
}
changed to:
#topnav li .sub-menu .sub-menu {
left: -100%;
margin: -12px 0 0 2px;
width: 100%;
}
The result:
As you can see the items are appearing on the left, but you'll need to do some css tweaks to get them to look juuuust right.
Here's how you can troubleshoot CSS issues like this using chrome's developer tools:
Right click over the offending element, in this case: we are looking at "Services", then select "Inspect Element":
You should now be inspecting the current CSS like so:
Now since these items are appearing when you hover, you'll have to 'force' a hover state.
This is where the fun begins. You'll have to make sure you find the right elements to force the hover on. I actually had a little struggle with this, so I ended up adding the force hover state to many other elements until it finally appeared (the green menu)
Repeated the same process to get the third tier menu.
Now you right click on the actual menu and select "inspect element" again - this time since the menus are FORCED HOVER, the item will stay selected when move the mouse away and you can finally see the actual CSS.
It was actually harder than it needed to be, as the theme really has some counter-intuitive settings to show these menus (why not just on hover?? it really felt like on multiple items hover..)
Related
We have a website fabulouslanzarote.com that has a navigation menu implemented using CSS3. The 'The Resort' and 'The Community' menu options have
sub-menus.
Recently it has been reported that these sub-menus are not accessible in Chrome. They appear when the top-level link is hovered, but disappear when you attempt to click one of the links.
We have not updated the site in a couple of months and they had been working following the last deployment, so maybe this is the result of an update to Chrome? The menus work fine in Firefox and Edge.
Does anyone know what is preventing the sub-menus from working properly in Chrome?
#Johannes is correct. The menu has a gap where, as you move your cursor over it, it loses the hover state. Try adding a transparent pseudo element on the ul.drop to fill the gap and keep the hover state as the cursor moves.
ul.drop:after {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 27px;
}
Disclaimer: While I don't usually recommend using hardcoded values, your menu already leverages them. That's why I chose 27px. It fit based on the other hardcoded values.
I think they are just a little bit to far below the main menu: When you move the mouse rather slowly (and not exactly in the middle), you loose the "hover" state and the submenu disappears.
I'd move them up a bit and make that arrow on top a little bit smaller to avoid that situation.
Only on chrome, the left sidebar menu disappears on hover. This does not happen at the top of the page but can be seen when scrolled midway of the page.
IMAGE SHOWING THE ISSUE --> https://symu.co/rdrbyt
Code:
.uk-notouch .tm-sidebar-togglebar .tm-sidebar:before {
content: "";
position: fixed;
}
.uk-notouch .tm-sidebar-togglebar .uk-open-menu:before {
content: "";
position: fixed;
width: 210px;
height: 100%;
}
DEMO SITE: http://healthsphere.starazure.com/ --> Please scroll down midway to the page and hover the left menubar to see the issue.
Thanks for your help
I figured out myself and was tired of people positing unrelated replies to make a fiddle out of a Joomla php based page with fontawesome icons, bootstrap, jquery and more and even better my css gets created by less. It was really a complicated 3 level menu system and people just said fiddle it without even looking at the example and screenshot. It could be possible to create a fiddle but would take a whole day for me ( I am not an expert, if so I would not ask the question here in the first place)
If you dont want to answer, that is perfectly fine and understandable but dont just say - This is no good without a fiddle when a demo and screenshot has been posted. Just move on - Be nice - everyone is fighting a hard battle here.
For anyone who is trying to make a 3 level menu, here is the answer.
The idea is to remove overflow property because that in conjunction with fixed position breaks in Chrome. Its a well known bug and has been reported. With overflow hidden removed, the next steps is to push the menu list items to the left. This makes the menu disappear but then used margin to push the icons only to the right. In short, move menu items to left so they are hidden and move icon only to the right. Remove overflow declarations in css as it breaks chrome.
.tm-sidebar .uk-navbar-nav li {margin-left: -175px;}
.tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}
I'm trying to edit the revolution slider plugin on my wordpress site. My images (slides) are not left aligned in the slider div. I found out where I can fix it using Firebug, and I know how to enter it into the custom css on wordpress, but but don't know the exact syntax to designate the proper div/id/class etc.
Video:
http://youtu.be/oyYrKAAAe80
Page in Question:
http://www.billyjacksdesign.com/design-work/the-living-logo/#htbanchor
I made the background of the slider red so the area I'm talking about is obvious, if you look at the other two sliders, you'll see that same area is white, but the div's shadow continues to the left margin--this misalignment is what I'm trying to remove.
Thanks for any help.
Adding the following to your stylesheet should work:
.rev_slider ul {
margin-left: 0;
}
Since the ul tag has a margin-left of 15px, but it doesn't have a class/id, you will need to go up a level which has a class rev_slider. Since the ul is in that class you can used .rev_slider ul
I'm using jqueryui's menu feature, and the submenu overlaps other elements on the page. The problem is when I select the menu item which brings up the submenu, the submenu is displayed beneath the other elements.
I'm not sure how menu is to be configured, or if I have to override some jqueryui css elements, in order to get this to display as expected (over top of the other page elements).
The problem can be seen with the Tools menu at http://jsbin.com/hexuw/2/
Sorry the code is more complex than is necessary to show the minimal problem, but the menu call can be seen just a few lines down in the javascript file.
Thinking that this is a stacking problem I tried setting the navigation element z-index to a high number using the .ontop class, but that didn't help.
Add the line z-index:9999; under the selector .ui-menu
The CSS code will be
/* put navigation to the left (jquery ui) */
.ui-menu {
width: 10%;
float: left;
z-index:9999;
}
JS Bin Live demo
This problem is only showing up in IE7. Other browsers and IE8 and above work fine.
I am using a sprite map with an ul for my side navigation. There is a fly-out submenu for one of the li elements which also uses a sprite map with an ul for downloading various PDFs.
If you look at the image that I've attached, the submenu is appearing in the correct location, but it's pushing down everything below it. (The word "Music" should appear directly below the word "Menu".)
I have tried various fixes using a display: inline; element and position: static; element, but my attempts have failed. Would really appreciate some help on this. The website address is: http://www.graysonmain.com/
You could use a fixed height, height: 58px and display: inline-block for li#nav_02.
Have you looked into overlays with CSS? I'm very new to this so I, personally, can't give you a concrete answer, but it might be possible to set the positioning of the submenus and toggle the visibility with an onClick() command.