Fix Display of Primary Nav Buttons

[DrewAllen88]

When adding a 4th nav item to the menu it breaks.

[timproDev]

@DrewAllen88 @joyjamir As I am looking into this, I am thinking that we will need designs for this. In exploring flexibility of adding links to the Main Nav we are running into real estate issues on iPad breakpoint dimensions and below. We may need to consider leveraging the brgr icon in it's fullest on iPad breakpoint, similar to how it is on iPhone where the main nav is included in the sub-brgr menu list. Alternatively, they can simply design the main nav so that it takes up less space, maybe by decreasing font size and button dimensions. please advise.

[timproDev]

@DrewAllen88 spoke with Joy and we are applying the iPhone main nav behavior for the tablet layout. meaning that the main nav will hide within the brgr icon on tablet. this way we descrease to possibility of breaking the nav when adding more links (4)

[timproDev]

@DrewAllen88 FED complete | tested on local moz, safari, chrome, ie9, ipad, iphone | ready for further QA

[HarshitKhandelwal]

Dev complete

[timproDev]

@HarshitKhandelwal Please find here the links to the updated designs

https://marsh.my.salesforce.com/06912000001gpJx

Additionally, here is a screenshot on my desktop of the new design:

[HarshitKhandelwal]

@timproDev - If you can see the links below, you can see the main nav issue i was talking about. Hover on the client segments and you can see the dropdown.

https://marshdev.www.marshinc.net/content/marsh/americas/us/en/home.html

Also, the class used for the client segment and about us dropdown need to be implemented on AEM side?

[timproDev]

Thanks for posting this @HarshitKhandelwal - please add the class of "sml-drop" to the last 2

under the

[HarshitKhandelwal]

Dev complete.

[DrewAllen88]

UAT Complete.

[timproDev]

@joyjamir @DrewAllen88 @markharle I have found a bug with the rendering of this component. On IE9, the brgr icon's drop nav layout is broken. The white background is supposed to go the whole way across but isn't. The is a FED issue and I am re-opening this and am trying to repair this on my end.

[DrewAllen88]

Can you post a screenshot when you get a second please @timproDev

[DrewAllen88]

@timproDev can you please include the removal of the hand cursor for the nav and revert to the standard cursor icon please. FED complete; will be included in Sept 25 FED drop

[timproDev]

additional tickets 48 - reopened and fixed first implementation introduced a bug in IE where the dropdown menu would not expand full length of desktop view and would also break layout on tablet and mobile ie9.js update

 var resizeListener = function(){                           $(window).on("resize", function(){

            if ($(window).width() >= 1025 && $("#mainNav > .slide-down-panel").length === 0) {                                     $(".slide-down-panel").clone().appendTo("#mainNav");             }

            if ($(window).width() >= 1025 && $("#mainNav > .slide-down-panel").length > 0) {                                 return;                             }

            if ($(window).width() < 1025 && $("#mainNav > .slide-down-panel").length > 0) {                 $("#mainNav > .slide-down-panel").remove();                 $(".main-nav-wrap .slide-down-panel").show();             }

        });             }          resizeListener();  

ie9.css update

nav {     &.open {         @media #{$large-up} {             .main-nav-wrapper {                 .slide-down-panel {                     display: none;                 }             }         }     } }

[HarshitKhandelwal]

@timproDev - will these be included in Sept 3 drop?

[timproDev]

@HarshitKhandelwal yes, it will - there is a new ticket for it

https://github.com/DrewAllen88/Enhancements/issues/96

[monalishah]

Integrated to AEM. Dev Complete.

[DrewAllen88]

@timproDev can we close this? Doesn't appear to exist any more with the new utility nav and the menu is fine.

[abhishek-a]

Jira 2230 created for it. Please do not update this ticket on GIThub anymore.