0

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

Kal
  • 1,656
  • 4
  • 26
  • 41
  • Sorry to say but there's a lot more broken than just that in Chrome :X I can't make head nor tails of the CSS or what you are trying to achieve with it. – Niels Keurentjes Nov 23 '14 at 01:55
  • @Neils - Do you realize that just by posting some unrelated answer, you are reducing the chances of the question being answered by a others who are willing to help? What dont you understand? Did you look at the demo posted? Level 1 menu disappears when hovered as shown in the issue. Nothing else is broken. – Kal Nov 23 '14 at 02:03
  • Actually it increases chances since my activity bumps up the question. I played with the demo at length but, depending on where you click, a whole lot more content disappears and appears in my current Chrome install. I think you need to severily simplify your CSS rules, I see tons of stuff in there that's simply not necessary or overkill. – Niels Keurentjes Nov 23 '14 at 02:58
  • ok, Thanks for the participation. I have been struggling with this. I see tons of similar issues posted including this - http://stackoverflow.com/questions/11258877/fixed-element-disappears-in-chrome --- But those solutions break something else. It may see that there is lot of stuff but its not as straight forward as you may think. There are 3 levels - icon bar that when hovered shows the level 1 menu which when hovered shows level 2. Anyways - thanks for an answer. – Kal Nov 23 '14 at 03:27
  • Please try to recreate this problem with as little code as possible, preferrably on jsfiddle or jsbin. The more work you put into preparing a good question, the easier it'll be for everyone else to help you answer it. – Stephan Muller Nov 23 '14 at 13:44
  • Really? A simple inspect element would show anyone what they need. Anyways - I found the answer myself. 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. 'code' .tm-sidebar .uk-navbar-nav li {margin-left: -175px;} .tm-sidebar .uk-navbar-nav li a i {margin-left: 175px;}'code' – Kal Nov 23 '14 at 17:47

1 Answers1

1

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;}
Kal
  • 1,656
  • 4
  • 26
  • 41