diff --git a/scipost/static/scipost/assets/css/_nav.scss b/scipost/static/scipost/assets/css/_nav.scss index d2057d4236ebf4978611841c3eef8e4f2a484e61..a5e59525ef3c8b4ee262156b3af58e73b546fc0a 100644 --- a/scipost/static/scipost/assets/css/_nav.scss +++ b/scipost/static/scipost/assets/css/_nav.scss @@ -80,29 +80,19 @@ nav.submenu { border-radius: 0; border-top: 1px solid #fff; border-bottom: 1px solid #ddd; + display: flex; + flex-wrap: nowrap; + flex-direction: row; + overflow-x: scroll; .item { - padding: 0.1rem 0.5rem; + padding: 0 0.5rem; white-space: nowrap; display: block; + border-right: 2px solid #fff; } .item:first-child, .item:last-child { border-right: 0; } } - -@media (min-width: 768px) { - nav.submenu { - display: flex; - flex-wrap: nowrap; - flex-direction: row; - - .item { - padding-top: 0; - padding-bottom: 0; - display: inline; - border-right: 2px solid #fff; - } - } -} diff --git a/scipost/static/scipost/assets/css/_navbar.scss b/scipost/static/scipost/assets/css/_navbar.scss index cf73379ead6176dcab645e6d2434bfc8923b5caf..dc38e17d6eb38b02bee82f3dd8676017185bdddf 100644 --- a/scipost/static/scipost/assets/css/_navbar.scss +++ b/scipost/static/scipost/assets/css/_navbar.scss @@ -4,8 +4,9 @@ */ .navbar { margin-bottom: 1.5rem; - display: block; + display: flex; flex-wrap: nowrap; + overflow-x: scroll; &.main-nav { border-bottom: 1px solid #ddd; @@ -35,16 +36,18 @@ .highlighted > .nav-link { background-color: rgba(255, 255, 255, 0.6); } + + .navbar-nav { + display: flex; + flex-direction: row; + } } @media (min-width: 768px) { .navbar { - display: flex; .navbar-nav { margin-right: auto; - display: flex; - flex-direction: row; } .nav-item { diff --git a/scipost/templates/scipost/navbar.html b/scipost/templates/scipost/navbar.html index ff16f034b5a542138434c8a923496925b2e6e533..9136679e461c8b55fa9a691c384c92f66a96c3d5 100644 --- a/scipost/templates/scipost/navbar.html +++ b/scipost/templates/scipost/navbar.html @@ -4,7 +4,7 @@ <nav class="navbar navbar-light main-nav navbar-expand-lg"> - <ul id="menu-navbar" class="navbar-nav collapse"> + <ul id="menu-navbar" class="navbar-nav"> <li class="nav-item{% if request.path == '/' %} active{% endif %}"> <a href="{% url 'scipost:index' %}" class="nav-link">Home</a> </li> @@ -69,7 +69,6 @@ {% endif %} </ul> - <a class="btn btn-block my-2" data-toggle="collapse" href="#menu-navbar" aria-expanded="false" aria-controls="menu-navbar">Show menu <i class="fa fa-angle-down" aria-hidden="true"></i></a> <form action="{% url 'scipost:search' %}" method="get" class="form-inline search-nav-form"> <input class="form-control" id="id_q" maxlength="100" name="q" type="text" required="required" value="{{search_query|default:''}}"> <input class="btn btn-secondary" type="submit" value="Search">