1

I am using the following code to create a simple flask navbar, can i please know how to change the background color and text color,

from flask import Flask
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from flask_nav.elements import Navbar, Subgroup, View

app = Flask(__name__)

Bootstrap(server)

nav = Nav(app)

@nav.navigation('my_nav')
def create_navbar():
    home_view = View('Home', 'home')
    dashboar_view = View('Dashboard', 'dashboard1')
    return Navbar('My App', home_view, dashboar_view)

and following is my base.html

{% extends "bootstrap/base.html" %}
{% block navbar %}
{{ nav.my_nav() }}
{% endblock %}

Thanks & Regards, Kumar.

Kumar
  • 25
  • 1
  • 5

1 Answers1

2

The Flask-Nav and Flask-Bootstrap use Bootstrap 3, so you can override the corresponding CSS class in your base template like this:

{% extends "bootstrap/base.html" %}

{% block styles %}
{{ super() }}
<style>
    .navbar-nav {...}
    .navbar-default {...}
</style>
{% endblock %}

{% block navbar %}
{{ nav.my_nav() }}
{% endblock %}

For custom navbar color, check out this answer.

Grey Li
  • 11,664
  • 4
  • 54
  • 64
  • Hi Grey, thanks for your response i set the following, background changed but not font color, how to change the font color ? .navbar-default {color: #FFFFFF !important; background-color: #337ab7 !important;} – Kumar Jun 06 '20 at 14:15
  • The text is inside the `a` element, you can try this: `.navbar-default .navbar-nav>li>a { color: #167ac6; }`. In general, you can open the browser's dev tools, enable inspect mode, click the the elements you want to change, then you will see the related CSS definition. – Grey Li Jun 07 '20 at 02:16