How to Have Nav Items Be on One Line

Site URL: http://roamvet.com

Hi there, how do I get all of the navigation items to be on one line instead of two? Thanks so much! Site is roamvet.com

Just simply add this code into

.header-title-nav-wrapper {
    width: 90%;
    flex-grow: 1;
    flex-shrink: 0;
}

.header-layout-nav-center .header-nav {
    flex: 1 1 auto; /* Allows the nav to take up available space */
    width: auto; /* Removes the need for fixed 100% width */
}

Is there a way to make the nav items take up even a little more space? Be closer to the logo?

On 11/30/2024 at 1:35 AM, Squareko said:

Just simply add this code into

.header-title-nav-wrapper {
    width: 90%;
    flex-grow: 1;
    flex-shrink: 0;
}

.header-layout-nav-center .header-nav {
    flex: 1 1 auto; /* Allows the nav to take up available space */
    width: auto; /* Removes the need for fixed 100% width */
}

 

This slightly worked, is there a way to make it take up even more space?

Site URL: http://roamvet.com

I'd like the nav items to be closer together, while keeping the logo centered, so that I can effectively increase the size of the nav bar items but have them still on one line.

On 12/2/2024 at 1:19 AM, andrewmarshall said:

This slightly worked, is there a way to make it take up even more space?

You can use this

div.header-title-nav-wrapper {
    flex: 1 0 90% !important;
}

div.header-title {
    text-align: left !important;
}