Adding Borders to Navigation/Header Elements

Site URL: https://www.buffconceptstore.squarespace.com

Help! Looking to create a header navigation like this: https://merchery.co/ 

I'm close, but struggling to add an appropriately sized border around the menu items (shop/services/cart) and then changing the button to fill that last section. If the latter is too difficult, then happy for it to be contained in a box! 

Password: hello

@tuanphan, do you have any ideas? 🤞

Add to Home > Design > Custom CSS

.header-announcement-bar-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.header-title-nav-wrapper {
    border-right: 1px solid black;
    padding-right: 20px;
    padding-top: 3vw;
    padding-bottom: 1vw;
}

Hi, @tuanphan! I also would like to add a border (mainly the bottom) to my navigation bar. All of the codes I've tried so far just would not work. Can you help, please?

SITE URL: http://www.louieandthird.com

PW: LTC

Thank you so much!

3 hours ago, louieandthird said:

Hi, @tuanphan! I also would like to add a border (mainly the bottom) to my navigation bar. All of the codes I've tried so far just would not work. Can you help, please?

SITE URL: http://www.louieandthird.com

PW: LTC

Thank you so much!

Add to Design > Custom CSS

/* Header border */
header#header {
    border-bottom: 1px solid gray;
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Header border */
header#header {
    border-bottom: 1px solid gray;
}

 

THANK YOU!! 🙂

On 5/24/2021 at 8:33 PM, louieandthird said:

THANK YOU!! 🙂

The site has some problems. Do you want to fix these?

Site URL – https://www.louieandthird.com/

1. (Mobile-Header) Increase logo size?

2. (Mobile-Footer) Align left footer?

3. (Mobile-Services) Text/image overlap together

4. (Tablet/Mobile-Overlay Menu) change it to custom font?

On 5/26/2021 at 8:57 AM, tuanphan said:

The site has some problems. Do you want to fix these?

Site URL – https://www.louieandthird.com/

1. (Mobile-Header) Increase logo size?

2. (Mobile-Footer) Align left footer?

3. (Mobile-Services) Text/image overlap together

4. (Tablet/Mobile-Overlay Menu) change it to custom font?

Hi @tuanphan! Sorry, I just saw this right now. Yes, I'd like those fixed if that's no trouble. Though, I think i've already fixed numbers 2 and 3. But please, double check. Also, for the footer, how can I  make the bottom space even with the top part? Thank you so much!

On 6/25/2021 at 10:36 AM, louieandthird said:

Hi @tuanphan! Sorry, I just saw this right now. Yes, I'd like those fixed if that's no trouble. Though, I think i've already fixed numbers 2 and 3. But please, double check. Also, for the footer, how can I  make the bottom space even with the top part? Thank you so much!

Add to Design > Custom CSS

/* fix issues */
@media screen and (max-width:767px) {
/* logo size */
.header-title-logo img {
    max-height: 70px;
}
/* mobile font */
div.container.header-menu-nav-item * {
    font-family: Frunchy !important;
}
/* footer space */
div#block-7f7c03cb870e582d2a02 {
    margin-bottom: 3vw !important;
}
}

5 hours ago, tuanphan said:

Add to Design > Custom CSS

/* fix issues */
@media screen and (max-width:767px) {
/* logo size */
.header-title-logo img {
    max-height: 70px;
}
/* mobile font */
div.container.header-menu-nav-item * {
    font-family: Frunchy !important;
}
/* footer space */
div#block-7f7c03cb870e582d2a02 {
    margin-bottom: 3vw !important;
}
}

 

Thank you so much!!

Hi everyone,

I would love to add border like on this website to my navigation bar:

https://www.ulloadesignco.com

Can anyone help please?

Thank you!

On 3/15/2022 at 5:37 AM, NinaK said:

Hi everyone,

I would love to add border like on this website to my navigation bar:

https://www.ulloadesignco.com

Can anyone help please?

Thank you!

What is your site url?

13 hours ago, tuanphan said:

What is your site url?

It's

https://aplaceofpurity.squarespace.com

PW: SqeTb94

(work in progress...)

Thank you!

@tuanphan I have similar question, do you know how to make the bar like Work with Thea like this? https://flatworm-cylinder-yntb.squarespace.com/

On 9/14/2022 at 1:34 AM, nhinhidesigns said:

@tuanphan I have similar question, do you know how to make the bar like Work with Thea like this? https://flatworm-cylinder-yntb.squarespace.com/

What is your site url? We can check code easier

Hi I am looking to add a border to my navigation links similar to this site: https://www.oakandstonetherapy.com/

Does anyone know the CSS to customize my header similarly?

On 11/29/2022 at 4:18 AM, maddie123 said:

Hi I am looking to add a border to my navigation links similar to this site: https://www.oakandstonetherapy.com/

Does anyone know the CSS to customize my header similarly?

That site uses this CSS

.header-nav {
    width: 100%;
    border-top: 1px solid #594f48;
    border-bottom: 1px solid #594f48;
    padding-top: 8px;
    padding-bottom: 8px;
}