[frio] Remove unwanted navbar-nav behavior for top nav bar on mobile

- Rename overly generic notification menu button id
This commit is contained in:
Hypolite Petovan 2020-02-09 01:37:20 -05:00
parent 7180fa18dd
commit 6c152a3204
2 changed files with 8 additions and 9 deletions

View file

@ -417,7 +417,11 @@ header #banner #logo-img,
} }
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.topbar ul.nav>li>a { padding-left: 10px; padding-right: 10px; }; .topbar ul.nav > li > a,
.topbar ul.nav > li > button
{
padding: 15px 10px;
}
} }
.topbar .dropdown-footer { .topbar .dropdown-footer {
margin: 10px margin: 10px
@ -862,9 +866,6 @@ nav.navbar a, nav.navbar .btn-link {
} }
/* Dropdown Menus */ /* Dropdown Menus */
#dropdownMenu1 {
padding: 15px 15px;
}
.nav > li > .btn-link { .nav > li > .btn-link {
position: relative; position: relative;
display: block; display: block;

View file

@ -37,7 +37,7 @@
</button> </button>
{{* Left section of the NavBar with navigation shortcuts/icons *}} {{* Left section of the NavBar with navigation shortcuts/icons *}}
<ul class="nav navbar-nav navbar-left" role="menubar"> <ul class="nav navbar-left" role="menubar">
{{if $nav.network}} {{if $nav.network}}
<li class="nav-segment"> <li class="nav-segment">
<a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a> <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
@ -76,14 +76,12 @@
{{* The notifications dropdown *}} {{* The notifications dropdown *}}
{{if $nav.notifications}} {{if $nav.notifications}}
<li id="nav-notification" class="nav-segment dropdown" role="presentation"> <li id="nav-notification" class="nav-segment dropdown" role="presentation">
<button id="dropdownMenu1" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu"> <button id="nav-notifications-menu-btn" class="btn-link dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="nav-notifications-menu">
<span id="notification-update" class="nav-notification-badge badge nav-notification dropdown" data-toggle="dropdown"></span> <span id="notification-update" class="nav-notification-badge badge nav-notification dropdown" data-toggle="dropdown"></span>
<i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i> <i class="fa fa-bell fa-lg" aria-label="{{$nav.notifications.1}}"></i>
</button> </button>
{{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}} {{* The notifications dropdown menu. There are two parts of menu. The second is at the bottom of this file. It is loaded via js. Look at nav-notifications-template *}}
<ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1"> <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="nav-notifications-menu-btn">
<!-- <ul id="nav-notifications-menu" class="dropdown-menu menu-popup" role="menu" aria-labelledby="dropdownMenu1" style="display: none;">
-->
{{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}} {{* the following list entry must have the id "nav-notificaionts-mark-all". Without it this isn't visable. ....strange behavior :-/ *}}
<li role="presentation" id="nav-notifications-mark-all" class="dropdown-header"> <li role="presentation" id="nav-notifications-mark-all" class="dropdown-header">
<div class="arrow"></div> <div class="arrow"></div>