title: Python Plotly Dash Sidebar and Navbar overlap each other
body: <p>I am new to Plotly Dash and trying to develop a multi-page App. How can I use both Sidebar and Navbar simultaneously?</p>
  <p>I have below an example code where the Sidebar is coming above Navbar. I have tried searching similar examples but couldn't find any.</p>
  <p>Any help would be awesome. Thanks.</p>
  <p>import dash
  import dash_bootstrap_components as dbc
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output, State</p>
  <pre><code># link fontawesome to get the chevron icons
  FA = &quot;https://use.fontawesome.com/releases/v5.8.1/css/all.css&quot;
  
  
  app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, FA])
  
  # the style arguments for the sidebar. We use position:fixed and a fixed width
  SIDEBAR_STYLE = {
      &quot;position&quot;: &quot;fixed&quot;,
      &quot;top&quot;: 0,
      &quot;left&quot;: 0,
      &quot;bottom&quot;: 0,
      &quot;width&quot;: &quot;16rem&quot;,
      &quot;padding&quot;: &quot;2rem 1rem&quot;,
      &quot;background-color&quot;: &quot;#f8f9fa&quot;,
  }
  
  # the styles for the main content position it to the right of the sidebar and
  # add some padding.
  CONTENT_STYLE = {
      &quot;margin-left&quot;: &quot;18rem&quot;,
      &quot;margin-right&quot;: &quot;2rem&quot;,
      &quot;padding&quot;: &quot;2rem 1rem&quot;,
  }
  
  submenu_1 = [
      html.Li(
          # use Row and Col components to position the chevrons
          dbc.Row(
              [
                  dbc.Col(&quot;Menu 1&quot;),
                  dbc.Col(
                      html.I(className=&quot;fas fa-chevron-right mr-3&quot;), width=&quot;auto&quot;
                  ),
              ],
              className=&quot;my-1&quot;,
          ),
          id=&quot;submenu-1&quot;,
      ),
      # we use the Collapse component to hide and reveal the navigation links
      dbc.Collapse(
          [
              dbc.NavLink(&quot;Page 1.1&quot;, href=&quot;/page-1/1&quot;),
              dbc.NavLink(&quot;Page 1.2&quot;, href=&quot;/page-1/2&quot;),
          ],
          id=&quot;submenu-1-collapse&quot;,
      ),
  ]
  
  submenu_2 = [
      html.Li(
          dbc.Row(
              [
                  dbc.Col(&quot;Menu 2&quot;),
                  dbc.Col(
                      html.I(className=&quot;fas fa-chevron-right mr-3&quot;), width=&quot;auto&quot;
                  ),
              ],
              className=&quot;my-1&quot;,
          ),
          id=&quot;submenu-2&quot;,
      ),
      dbc.Collapse(
          [
              dbc.NavLink(&quot;Page 2.1&quot;, href=&quot;/page-2/1&quot;),
              dbc.NavLink(&quot;Page 2.2&quot;, href=&quot;/page-2/2&quot;),
          ],
          id=&quot;submenu-2-collapse&quot;,
      ),
  ]
  
  
  sidebar = html.Div(
      [
          html.H2(&quot;Sidebar&quot;, className=&quot;display-5&quot;),
          html.Hr(),
          html.P(
              &quot;A sidebar with collapsible navigation links&quot;, className=&quot;lead&quot;
          ),
          dbc.Nav(submenu_1 + submenu_2, vertical=True),
      ],
      style=SIDEBAR_STYLE,
      id=&quot;sidebar&quot;,
  )
  
  PLOTLY_LOGO = &quot;https://images.plot.ly/logo/new-branding/plotly-logomark.png&quot;
  
  search_bar = dbc.Row(
      [
          dbc.Col(dbc.Input(type=&quot;search&quot;, placeholder=&quot;Search&quot;)),
          dbc.Col(
              dbc.Button(&quot;Search&quot;, color=&quot;primary&quot;, className=&quot;ml-2&quot;),
              width=&quot;auto&quot;,
          ),
      ],
      no_gutters=True,
      className=&quot;ml-auto flex-nowrap mt-3 mt-md-0&quot;,
      align=&quot;center&quot;,
  )
  
  navbar = dbc.Navbar(
      [
          html.A(
              # Use row and col to control vertical alignment of logo / brand
              dbc.Row(
                  [
                      dbc.Col(html.Img(src=PLOTLY_LOGO, height=&quot;30px&quot;)),
                      dbc.Col(dbc.NavbarBrand(&quot;Navbar&quot;, className=&quot;ml-2&quot;)),
                  ],
                  align=&quot;center&quot;,
                  no_gutters=True,
              ),
              href=&quot;https://plot.ly&quot;,
          ),
          dbc.NavbarToggler(id=&quot;navbar-toggler&quot;),
          dbc.Collapse(search_bar, id=&quot;navbar-collapse&quot;, navbar=True),
      ],
      color=&quot;dark&quot;,
      dark=True,
  )
  
  content = html.Div(id=&quot;page-content&quot;, style=CONTENT_STYLE)
  
  app.layout = html.Div([dcc.Location(id=&quot;url&quot;), navbar,sidebar, content])
  
  
  # this function is used to toggle the is_open property of each Collapse
  def toggle_collapse(n, is_open):
      if n:
          return not is_open
      return is_open
  
  
  # this function applies the &quot;open&quot; class to rotate the chevron
  def set_navitem_class(is_open):
      if is_open:
          return &quot;open&quot;
      return &quot;&quot;
  
  
  for i in [1, 2]:
      app.callback(
          Output(f&quot;submenu-{i}-collapse&quot;, &quot;is_open&quot;),
          [Input(f&quot;submenu-{i}&quot;, &quot;n_clicks&quot;)],
          [State(f&quot;submenu-{i}-collapse&quot;, &quot;is_open&quot;)],
      )(toggle_collapse)
  
      app.callback(
          Output(f&quot;submenu-{i}&quot;, &quot;className&quot;),
          [Input(f&quot;submenu-{i}-collapse&quot;, &quot;is_open&quot;)],
      )(set_navitem_class)
  
  
  @app.callback(Output(&quot;page-content&quot;, &quot;children&quot;), [Input(&quot;url&quot;, &quot;pathname&quot;)])
  def render_page_content(pathname):
      if pathname in [&quot;/&quot;, &quot;/page-1/1&quot;]:
          return html.P(&quot;This is the content of page 1.1!&quot;)
      elif pathname == &quot;/page-1/2&quot;:
          return html.P(&quot;This is the content of page 1.2. Yay!&quot;)
      elif pathname == &quot;/page-2/1&quot;:
          return html.P(&quot;Oh cool, this is page 2.1!&quot;)
      elif pathname == &quot;/page-2/2&quot;:
          return html.P(&quot;No way! This is page 2.2!&quot;)
      # If the user tries to reach a different page, return a 404 message
      return dbc.Jumbotron(
          [
              html.H1(&quot;404: Not found&quot;, className=&quot;text-danger&quot;),
              html.Hr(),
              html.P(f&quot;The pathname {pathname} was not recognised...&quot;),
          ]
      )
  # add callback for toggling the collapse on small screens
  @app.callback(
      Output(&quot;navbar-collapse&quot;, &quot;is_open&quot;),
      [Input(&quot;navbar-toggler&quot;, &quot;n_clicks&quot;)],
      [State(&quot;navbar-collapse&quot;, &quot;is_open&quot;)],
  )
  def toggle_navbar_collapse(n, is_open):
      if n:
          return not is_open
      return is_open
  
  if __name__ == &quot;__main__&quot;:
      app.run_server(port=8888, debug=True)
  </code></pre>