Nav Bar oriented vertically rather than horizontally

[emj1020]

I am new to this library but have been having issues orienting the navigation bar horizontally in my Streamlit app. It seems to be defaulting to a vertical orientation despite me having copy and pasted the example code from the github repo. Find my code below and a screenshot of the app attached.

import streamlit as st
from hydralit.app_template import HydraHeadApp
import hydralit_components as hc
import apps

# Define RGB colors
medium_blue = (91, 155, 213)
bright_blue = (44, 170, 226)
dark_blue = (35, 50, 103)
white = (255, 255, 255)

# Main Navigation App
class MainApp(HydraHeadApp):
    def run(self):

        with st.sidebar:
            st.markdown('**Brought to you by the [Data Collaborative for Justice](https://datacollaborativeforjustice.org/) at John Jay College of Criminal Justice**', unsafe_allow_html=True)
            st.image("images\\DCJ_logo_Horizonal_JJ.png")

        #navigation bar
        menu_data = [
            {'label': "Projections"},
            {'label': "Monthly Trends"},
            {'label': "Disparities"},
            {'label': "Contact Us"}
        ]

        over_theme = {'txc_inactive': '#FFFFFF', 'menu_background':f'rgb{medium_blue}','txc_active': f'rgb{dark_blue}'}

        menu_id = hc.nav_bar(
            menu_definition=menu_data,
            override_theme=over_theme,
            home_name='Home',
            hide_streamlit_markers=False, #will show the st hamburger as well as the navbar now!
            sticky_nav=True, #at the top or not
            sticky_mode='pinned', #jumpy or not-jumpy, but sticky or pinned
        )    

        if menu_id == "Home":
            home_page = apps.HomePage()
            home_page.run()
        elif menu_id == "Projections":
            projections = apps.Projections()
            projections.run()
        elif menu_id == "Monthly Trends":
            monthly_trends = apps.MonthlyTrends()
            monthly_trends.run()
        elif menu_id == "Disparities":
            disparities = apps.Disparities()
            disparities.run()

# Run the app
if __name__ == "__main__":
    main_app = MainApp()
    main_app.run()

[emj1020]

I am going to mark this a resolved because I figured it out. You need to set the appearance setting for your streamlit dashboard to "Wide" I added one line of code in my MainApp function (before the sidebar code):

st.set_page_config(layout="wide")