Struggling to get the menu underneath an image

I have a site that is working quite nicely under grav + gantry. It is however quite cumbersome and limiting, so I am trying to convert it to twig using grav with quark v 1.4.5.

The site can be seen at www.nhbpeterborough.com

My troubles begin with the header part. I would like to have an image displayed above the menu.

I have tried altering base.html.twig thus

<body id="top" class="{% block body_classes %}{{ body_classes }}{% endblock %}">
<div id="page-wrapper">
{% block header %}
<section id="header" class="section">
<section class="container {{ grid_size }}">
<nav class="navbar">
<section class="navbar-section logo">
<img src = "{{ base_url_relative }}/user/images/{{page.header.content.header}}.png" >
</section>
<section class="navbar-section">

                    <nav class="dropmenu animated">
                        {% block header_navigation %}
                    {% include 'partials/navigation.html.twig' %}
                        {% endblock %}
                    </nav>

ETC.
Different pages have an image of different heights - the image name is specified in front matter.

I do not know how to find grid-size or where to find theme variables.

I do not know how to find the value of grid_size.
I suspect the flex things in classes navbar and navbar section.

Is there a simple solution?
Thanks
Norma