Hi Tim

Not sure if this is your full/original post. There has been some issues with Our today - A new version should have been launched but some unforseen issues arised during the process it seems - So HQ rolled back to the old forum and I think newly created post might have lost some data in that process.

So what issue are you having with the starter kit? And what exact version of Umbraco 7 are you using?

/Jan

Hi Tim,

It´s bit hard to know what you mean with bug with the Fanoe starter kit styling from your post. So if you could described it in more detail way what you see as bug in the styling of Fanoe starter kit.

Perhaps you could provide some screenshots of how it looks like. The more information you can provide on what you are experience, then it's easier to help you out or point you in the right direction.

By the way what version of Umbraco 7.2.x are you using.

Looking forward to hear from you.

/Dennis

Jan/Dennis.  I noticed that there were issues with the site yesterday.  My full original post is below.

Hi,

I'm using Umbraco 7.2.1 with the Fanoe starter kit and have found an issue with the Main Navigation.

When at 950px browser width the navigation collapses to a burger.  Click on it and the top level items display fine.  When you click on the top level items they do not display their sub-menu.

At 700px it works fine.

The issue is shown here: http://www.skttl.dk/.  Reduce the browser width a little until the burger navigation appears and then click the "Learn" menu item, no sub menu is shown.  At a lower browser width the sub menu is shown fine.

Issue has been identified in IE9 and Chrome

If I take this out of the Fanoe.css then it does not show the sub menu for either browser size but I can't see what's stopping it working at 950px when it is there.

nav > ul li.selected ul {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
height: 120%;
}

Any ideas?

Thanks,

Tim

Hi Tim

Ok, seems like an issue with the javascript setting the .selected class. It does not work when the screen resolution is 800 pixels either...so between 800-950px it does not work. Below works fine.

I have not had time to solve the issue but you should be able to play around with it and figure it out if you know your way around JavaScript by having a look at the fanoe.js file. This is the code block you need to modify - You probably just need to increase the number in the first if statement so it reads something like window.innerWidth < 950 for instance - As I said...have not had time to test :)

  $('.has-child').click(function(){
    if ( window.innerWidth < 768 ) {
      if ( $( this ).hasClass('selected')){
        $('.has-child').removeClass('selected');    
      } else {
        $('.has-child').removeClass('selected'); 
        $(this).toggleClass('selected');
      }
    }
  });

Hope this helps.

Btw...it might also be worth adding a bug report to the issue tracker at http://issues.umbraco.org/issues

/Jan

Hi Tim,

as Jan is pointing out, it's because of the window.innerWidth < 768 , if you set this to 992 you're home free.

Also, if you remove top property from the code block below

@media (max-width: 992px)
nav {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out;
        transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
        text-align: center;
        position: absolute;
        top: 144px; /* REMOVE THIS */
    }
}

and add

@media (min-width: 768px) and (max-width: 992px)
nav {
        top: 144px;
    }
}

You'll get a better result :)

/Cheers, Simon

Brilliant, thanks everyone.

I'll post a bug to the issue tracker.

Tim

Edit: bug is logged here

Thank you, this was very helpful!

This was the perfect solution for the vertical tablet configuration. I took both the CSS and the js suggestions and implemented them with no problem on 7.5.6. Now all of the burger menus correctly show the submenus. Could someone update those files so that a clean download has those edits?

is working on a reply...