This is an automated email from the ASF dual-hosted git repository. slawrence pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-daffodil-site.git
commit b246f8cb16bda9922ed845631d943103269d77df Author: Steve Lawrence <[email protected]> AuthorDate: Mon Oct 15 07:42:40 2018 -0400 Fix the navigation bar on smaller screens The navigation bar was completely broken on smaller screens like on tablets and phones. Part of the issue was due to the fixed and collapsed capabilities of the nav bar. Those don't provide much value, so just remove them completely. The navbar now scrolls along with the page, and on small screen the nav bar just wraps to the next line and becomes centered. --- site/_includes/themes/apache/_navigation.html | 11 +---- site/assets/themes/apache/css/style.css | 61 ++++++++++++++++++++------- 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/site/_includes/themes/apache/_navigation.html b/site/_includes/themes/apache/_navigation.html index 4c4d573..c713022 100644 --- a/site/_includes/themes/apache/_navigation.html +++ b/site/_includes/themes/apache/_navigation.html @@ -1,18 +1,11 @@ - <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> + <div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> <a class="navbar-brand" href="/"> - <!--<img src="/assets/themes/apache/img/logo.png" width="50">--> Apache Daffodil (incubating) </a> </div> - <nav class="navbar-collapse collapse" role="navigation"> + <nav role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="/releases">Releases</a></li> <li id="documentation"> diff --git a/site/assets/themes/apache/css/style.css b/site/assets/themes/apache/css/style.css index ce9be6e..fba72d1 100644 --- a/site/assets/themes/apache/css/style.css +++ b/site/assets/themes/apache/css/style.css @@ -2,22 +2,11 @@ @import url(//fonts.googleapis.com/css?family=Patua+One); body { - padding-top: 50px; padding-bottom: 20px; font-family: 'Carlito', 'FreeSans', 'Liberation Sans', 'Arial', 'Helvetica', sans-serif; font-size: 16px; } -/* this makes it so anchors are slightly below the navbar so they - * aren't covered up when linked */ -*[id]:before { - display:block; - content: " "; - margin-top: -75px; - height: 75px; - visibility: hidden; -} - h1, h2, h3, @@ -50,6 +39,11 @@ h6, } } +.container > .navbar-header { + margin:auto; + text-align: center; +} + .navbar-brand { padding: 12px 12px; padding-top: 15px; @@ -60,13 +54,46 @@ h6, background-color:#fad400; color: #000000; border-color: #e0c52d; - max-height: 51px; + margin-bottom: 0px; + border-radius: 0px; +} + +.navbar-nav { + text-align: center; + margin: auto; +} + +.nav > li { + float: none; + display: inline-block; +} + +.navbar-nav .open .dropdown-menu { + position: absolute; + border-radius: 4px; + border: solid 1px rgba(0,0,0,.15); + box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4); + background-color: #ffffff; + right: 0; + left: auto; +} + +.dropdown-menu > li > a { + text-align: left; +} + +@media (max-width: 1023px) { + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover { + color: #000000; + background-color: #f5f5f5; + } } .navbar-inverse .navbar-nav > li > a { color: #000000; background-color:#fad400; font-size: .9em; + display: inline-block; } .navbar-inverse .navbar-nav > li > a:hover, @@ -90,7 +117,9 @@ h6, } .navbar-brand { - font-size: 20px; + font-size: 26px; + display: inline-block; + float: none; } @media (min-width: 520px) { @@ -392,8 +421,10 @@ hr { } @media only screen and (max-width : 768px) { - .navbar .navbar-brand { - padding-bottom: 0; + .navbar .navbar-brand a { + line-height: 40px; + padding-top: 5px; + padding-bottom: 5px; } }
