From 33c6ce00a538a084913adb93cc6d4b26cfc87f6a Mon Sep 17 00:00:00 2001 From: Brandon Walsh Date: Thu, 8 Mar 2018 14:54:37 -0500 Subject: [PATCH] Mobile CSS Fix Closes #723 --- _includes/header.html | 54 +++++++++++++++++++++------------------- _includes/menu.html | 4 +-- js/bootstrap-4-navbar.js | 34 +++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 28 deletions(-) create mode 100755 js/bootstrap-4-navbar.js diff --git a/_includes/header.html b/_includes/header.html index 71bf47b659..881227f543 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,37 +1,39 @@ - - - + + + - {% include metadata.html %} + {% include metadata.html %} - {% include twitter-card.html %} + {% include twitter-card.html %} - - + + - + - + - {{ page.title }} | {{ site.name }} + {{ page.title }} | {{ site.name }} - + - - - + + + - - - + + + - - - + + + + - + + diff --git a/_includes/menu.html b/_includes/menu.html index 815b9cd1d2..e11e72d92d 100644 --- a/_includes/menu.html +++ b/_includes/menu.html @@ -6,7 +6,7 @@ The Programming Historian -
  • +
  • diff --git a/js/bootstrap-4-navbar.js b/js/bootstrap-4-navbar.js new file mode 100755 index 0000000000..c206c70a0b --- /dev/null +++ b/js/bootstrap-4-navbar.js @@ -0,0 +1,34 @@ + +/*! + * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ ) + * Copyright 2017. + * Licensed under the GPL license + */ + + +$( document ).ready( function () { + $( '.mobile-drop a.dropdown-toggle' ).on( 'click', function ( e ) { + var $el = $( this ); + var $parent = $( this ).offsetParent( ".mobile-drop" ); + if ($('.show.mobile-drop').length > 0){ + $('.show.mobile-drop').each(function(item){ + $(this).toggleClass('show'); + }); + } + + var $subMenu = $( this ).next( ".mobile-drop" ); + $subMenu.toggleClass( 'show' ); + + $( this ).parent( "li" ).toggleClass( 'show' ); + + $( this ).parents( 'li.nav-item.dropdown.mobile-drop.show' ).on( 'click', function ( e ) { + $( '.mobile-drop .show' ).removeClass( "show" ); + } ); + + if ( !$parent.parent().hasClass( 'navbar-nav' ) ) { + $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } ); + } + + return false; + } ); +} );