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.
Related
I am using layers framework for my wordpress based website. Checkout here medshopi.I have used left logo style for the menubar. In the menubar the logo and the menu items are overlapping. Same is the case with responsive layout. I dont understand which part of css is overlapping the logo and menu items.Your help is extremely appreciated and thanks in advance.
Remove
position: absolute;
from line number 157 on style.css
Since your .logo div is an absolutely positioned element, the sibling .nav becomes blind to it.
You have to give the nav enough space, via padding or margin to get around the issue. This assumes that you want the menu to start right after the menu. Example
.header-site nav {
margin-left: 200px;
}
Output 1
You could also remove the position absolute and accompanying style applied on your logo which seems to be the right thing to do.
Output 2:
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;}
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..)
In the past days I switched my menu to mobile friendly version. Is nearly done so far, only one issue remains: In the desktop version I've positioned the submenus absolutely so that they cover what is below when made visible. However, in the mobile version I would like to have them in regular textflow, so that what is below slides down when I make them visible. I'm using mediaqueries and have tried to set the position attribute to "static" but this didn't work:
#Navigation li ul {
position: static;
display: none;
}
My test page: http://ulrichbangert.de/indexr3.php (Resize the viewport to a small width until the menu has one column.) I've used this tutorial: http://www.menucool.com/ddmenu/create-mobile-friendly-responsive-menu.aspx where it works just as I want it to. However I cannot use this one-by-one as I wanted to keep the layout of my existing menu. Best regards - Ulrich
In the meantime I was able to solve this problem on my own: Apparently some CSS attributes cannot be changed when they are in a nested list and not on top level. In this case the attribute position. Afterwards I had the same problem with the attribute width which I could not change to 100% and the attribute padding-left which I could not change either. And some years ago when I implemented the initial version of this menu with the attribute height, which I could not change to auto on hover after setting it to 0 initially. Only setting to a fixed height worked.
How can this be? Is it intended or is it a bug in the browsers implementation? (I tested with firefox).
Anyway my menu works fine now, just as I figured it.
I have a navigation menu generated by Wordpress, meaning I have pretty much no control on how it is output.
I have used css to style it the way I want with on-hover submenus, but it looks off in IE7. It does not have any problems in other browsers.
The main menu may seem off even in browsers that work because I am using #fontface on my website but did not include in the jsFiddle. The main problem is the gaps between the submenu items.
I have tried vertically aligning the submenu li and a, but it either made it worse or didn't fix the problem.
I have replicated the problem here: [link removed]
If I add
#menu-header .sub-menu a { height: 100%; }
It fixes the vertical gap problem, but the items are no longer the same width.
You can try the following :
#menu-header .sub-menu a { zoom: 1; }
This will remove the gap, but items will be the same width as the inner content.
I had the same problem some time ago. What I did was, create a container div inside the li. so that longer text can wrap, and set a static width. You can even use jQuery to adjust the widths of each dropdown dynamically, but that a whole different story.
Few references :
http://work.arounds.org/issue/20/removing-gaps-between-list-items-containing-anchor/
http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/
http://www.belafontecode.com/3-ways-to-get-rid-of-spaces-in-list-item-navigation-in-ie6/