in python code part (as app.py) in the part of menubar we can define our navebar as :
# Define navbar with logo #
#######################################################
logo = img(src='/static/img/logo192.png', height="55",
width="70", style="margin-top:-15px",
)
# here we define our menu items
nav = Nav()
# registers the "top" menubar
nav.register_element('top', Navbar(logo,
View('Home', 'index'),
View('LogIn', 'login'),
View('SignUp', 'signup'),
))
code part html in my template:
<body>
<div class="navbar navbar-fixed-top">
{% block navbar %}
{{nav.top.render()}}
{% endblock %}
</div>
a logo img is not clickable how can i make to render this image clickable to any link
it possible if we add a scripts to my template file
after adding a id attribute to <img :
# Define navbar with logo #
#######################################################
logo = img(id='logo', src='/static/img/logo192.png', height="55",
width="70", style="margin-top:-15px",
)
and can change a <img tag to <a tag with js scripts as :
</body>
{% block scripts %}
{{super()}}
<script>
var initi = document.getElementById('logo').outerHTML;
console.log(initi);
var code =
'<a id = "alogo" href="">' +
initi +
'</a>';
console.log(initi);
window.addEventListener('load', function(event) {
document.getElementById('logo').outerHTML = code;
document.getElementById('alogo').href ="{{ url_for('image_map') }}"
});
</script>
{% endblock %}