how to remove blank space between logo, links, and elements in header?

hi all,

Im trying to remove the padding between the links, header, and elements of my header in 7.1. I am able to change the spacing between the links themselves, but I want them to be able to fill all the space in the center of the header. Also, is there a way to have the distance between the social links and the page links independent of each other? @tuanphan

Hi,
Please share your website URL.

Best,
Leopold

Hi,

Try adding to Home > Design > Custom CSS. If it doest work, please share site url.

/* Nav one line */
.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

On 11/17/2020 at 3:04 AM, tuanphan said:

Hi,

Try adding to Home > Design > Custom CSS. If it doest work, please share site url.

/* Nav one line */
.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

 

this fixed it!

On 11/17/2020 at 2:04 AM, tuanphan said:

Hi,

Try adding to Home > Design > Custom CSS. If it doest work, please share site url.

/* Nav one line */
.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

 

I've got the same issue, @tuanphan, but I'm not sure where "home" > "design" is. I tried putting your code under the gear icon for the home page > advanced > custom CSS snippet. But it just showed the code along the top of the website when applied.

Any advice?!

My URL is currently welcholsen.squarespace.com and right now, if I'm previewing on a smaller desktop / device size, the nav links wrap to two lines.

@BethanyBoss Try adding this code under Website > Utilities > Website Tools > Custom CSS

.header-nav-list {
	flex-wrap: nowrap !important;
}

On 9/29/2023 at 10:18 AM, Lesum said:

@BethanyBoss Try adding this code under Website > Utilities > Website Tools > Custom CSS

.header-nav-list {
	flex-wrap: nowrap !important;
}

 

@Lesum — You're the best!! That did the trick. Thank you so much.