how to convert a logo of Navbar(logo, View('Home', ... from Flask-Nav module to a clickable link

Question

how to convert a logo of Navbar(logo, View('Home', ... from Flask-Nav module to a clickable link

160 views Asked by Fethi Pounct At 06 November 2021 at 23:00

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

Original Q&A

There are 1 answers

**Fethi Pounct** · Answer 1 · 2021-11-06 23:00:00

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 %}

TechQA.

how to convert a logo of Navbar(logo, View('Home', ... from Flask-Nav module to a clickable link

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CLICKABLE

Related Questions in FLASK-BOOTSTRAP

Related Questions in FLASK-NAV

Popular Questions

Popular Tags

Trending Questions