Fix issue #40 (menu covers posting box in mobile with no JS)

Don't pin the menu to the top by default -- add those classes from JavaScript.
This is clearly the best thing on mobile, but it means that on desktop, without
JavaScript, the menu will not be pinned to the top, which used to work.
This commit is contained in:
Jason McBrayer 2018-12-06 10:14:25 -05:00
parent 5266b8df03
commit 9d70757988
2 changed files with 6 additions and 3 deletions

View File

@ -23,6 +23,10 @@ function menuPrepare() {
var menu = document.querySelector('#navMenu'); var menu = document.querySelector('#navMenu');
menu.classList.remove('is-active'); menu.classList.remove('is-active');
// Pin the navbar to the top
document.querySelector('body').classList.toggle("has-navbar-fixed-top");
document.querySelector('nav.navbar').classList.toggle("is-fixed-top");
// Add the burger // Add the burger
var brand = document.querySelector('.navbar-brand'); var brand = document.querySelector('.navbar-brand');
var burger = document.createElement('a'); var burger = document.createElement('a');

View File

@ -51,12 +51,11 @@
<link rel="icon" href="{% static "images/brutaldon.png" %}" type="image/png"> <link rel="icon" href="{% static "images/brutaldon.png" %}" type="image/png">
{% endif %} {% endif %}
</head> </head>
<body class="has-navbar-fixed-top" <body ic-global-include='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
ic-global-include='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'>
<div id="page-load-indicator">&nbsp</div> <div id="page-load-indicator">&nbsp</div>
<div id="new-toot-modal" class="modal"></div> <div id="new-toot-modal" class="modal"></div>
{% block navbar %} {% block navbar %}
<nav class="navbar is-fixed-top is-primary" role="navigation" <nav class="navbar is-primary" role="navigation"
aria-label="main navigation" id="main-nav-bar"> aria-label="main navigation" id="main-nav-bar">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{% url "home" %}"> <a class="navbar-item" href="{% url "home" %}">