Home > Enterprise >  Altering height of Python/Dash Navigation Pills?
Altering height of Python/Dash Navigation Pills?

Time:10-24

I have a Python/Dash application with a vertical nav-bar and I wish to alter the height of the nav-pills. I'm using the bootstrap "SLATE" theme with the CSS-file stored locally in the /asset directory. enter image description here

The sidebar code:

SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    #"background-color": "#4F5761",
}

    sidebar = html.Div([
            html.P("MySidebar"),
            html.Hr(),
            dbc.Nav(
                [dbc.NavLink("Section 1", href="/page_1", active="exact"),
                 dbc.NavLink("Section 2", href="/page_2", active="exact"),
                 dbc.NavLink("Section 3", href="/page_3", active="exact"),],
                vertical=True,
                pills=True,),
            ],
            style=SIDEBAR_STYLE,)

I found a similar question in this thread Changing the height of Bootstrap's nav-pills suggesting the following extension to the CSS but I cannot figure out how to apply it.

.nav>li>a {
    padding-top: 1px;
    padding-bottom: 5px;
}

Question: How can I (in a Python/Dash context) extend the original bootstrap CSS to change height of the pills? I'd prefer to leave the bootstrap CSS untouched and override the specific properties needed in a separate small CSS. What properties should I change and how do I introduce another CSS-file that overrides these specific properties in the original one (which CSS overrides the other)?

CodePudding user response:

  1. You should create an assets folder in the same directory where the python file exists.

  2. Create a CSS file in the assets folder and put your CSS style.

    • main_file.py
    • assets/
      |-- style.css
  3. Run your python file, the CSS file will be applied automatically.

  • Related