husstanden/templates/layout/includes/top_nav.html

<style>
.rndblock {
    border-radius: 100%;
	background: #506EE4;
	background-position: center;
    width: 40px;
    height: 40px;

    color: white;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    display: table-cell;

	cursor: pointer;
}

.lang-icon {
	background-position: left;
	background-size: contain;
    width: 32px;
    height: 24px;

    color: white;
    text-align: center;
    font-size: 24px;
    vertical-align: middle;
    display: table-cell;
}

.lang-en {
    background-image: url("{{ url_for('static', filename='const/img/flags/gb.svg') }}");
}

.lang-no {
    background-image: url("{{ url_for('static', filename='const/img/flags/no.svg') }}");
}

.icon-buttons > .col {
	padding-right: 6px;
	padding-left: 6px;
}

.topnav a {
	color: black;
}
</style>

<nav class="navbar topnav" style="margin-bottom: 10px;">
    <h3>{{ _(title) | title }}</h3>
	<div>
{% with messages = get_flashed_messages(with_categories = true) %}
	{% if messages %}
		{% for category, message in messages %}
		<div class="alert alert-{{ category }} fade in show" role="alert" style="margin-bottom:0px;padding:6px;">
			<a href="#" class="close" data-dismiss="alert" aria-label="close" style="margin-left:10px;">&times;</a>
			{{ message }}
		</div>
		{% endfor %}
	{% endif %}
{% endwith %}
	</div>
    <div class="my-2 my-lg-0 d-flex icon-buttons">
        <div class="col">
            <div class="rndblock lang-{{ session.lang }}" data-toggle="dropdown" aria-expanded="false"></div>
			<ul class="dropdown-menu">
				<li>
					<div class="row">
						<a class="col d-flex m-1" href="?lang=en">
							<div class="lang-icon lang-en"></div>
							<div class="flex-grow-1"></div>
							<span>{{ _("english") | title }}</span>
							<div class="flex-grow-1"></div>
						</a>
					</div>
					<div class="row">
						<a class="col d-flex m-1" href="?lang=no">
							<div class="lang-icon lang-no"></div>
							<div class="flex-grow-1"></div>
							<span>{{ _("norwegian") | title }}</span>
							<div class="flex-grow-1"></div>
						</a>
					</div>
				</li>
			</ul>
        </div>
        <div class="col">
            <div class="rndblock">
                <i class="fas fa-bell"></i>
            </div>
        </div>
        <div class="col">
            <div class="rndblock" data-toggle="dropdown" aria-expanded="false"> <!-- OR INCLUDE BACKGROUND TEXTURE -->
                {{ current_user.firstname[0]|upper }} <!-- FIRST CHAR OF USER -->
            </div>
			<ul class="dropdown-menu">
				<li>
					<div class="row">
						<div class="col">
							<a href="{{ url_for('logout') }}">{{ _("Sign out") }}</a>
						</div>
					</div>
				</li>
			</ul>
        </div>
    </div>
</nav>