Trouble Getting Navigation Bar On One Line

Site URL: https://www.team1727.org/

Password: 1727

Hello!

I would like to get my navigation bar links to sit on one line. This includes the Instagram Logo. Any help with custom CSS to do this would be greatly appreciated!

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-8e63afbd8be9b172ce6f div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div#block-8e63afbd8be9b172ce6f * {
    margin: 0px;
}
}

I don't think that quite did the trick. I would like the circled portion on one line. Thank you for your help though!

I don't see any items in header

21 minutes ago, tuanphan said:

I don't see any items in header

Hmm, that's interesting. I edited some CSS that may have caused the problem so please look again. Thanks!

On 12/19/2021 at 12:19 PM, jaxnoel said:

Hmm, that's interesting. I edited some CSS that may have caused the problem so please look again. Thanks!

Add to Design > Custom CSS

/* nav one line */
.header-layout-nav-right .header-nav-list {
    flex-wrap: nowrap;
}
/* nav width */
.header-nav {
    width: 70% !important;
    flex: 70% !important;
}
/* logo width */
.header-title {
    width: 30%;
}

On 12/21/2021 at 3:14 AM, tuanphan said:

Add to Design > Custom CSS

/* nav one line */
.header-layout-nav-right .header-nav-list {
    flex-wrap: nowrap;
}
/* nav width */
.header-nav {
    width: 70% !important;
    flex: 70% !important;
}
/* logo width */
.header-title {
    width: 30%;
}

 

That works! Thank you so much!

On 12/29/2021 at 1:18 AM, jaxnoel said:

That works! Thank you so much!

Just checked again & found this issue

You can add this CSS to fix problem

/* Vex tablet image overlap text */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1640665969501_6670+.row .html-block {
    margin-top: 30px;
}
}