merakiconceptstudio Posted July 24, 2020 Posted July 24, 2020 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
merakiconceptstudio Posted July 27, 2020 Author Posted July 27, 2020 @tuanphan, do you have any ideas? 🤞
tuanphan Posted July 27, 2020 Posted July 27, 2020 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
sheriipop Posted May 24, 2021 Posted May 24, 2021 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!
tuanphan Posted May 24, 2021 Posted May 24, 2021 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; } sheriipop 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
sheriipop Posted May 24, 2021 Posted May 24, 2021 5 hours ago, tuanphan said: Add to Design > Custom CSS /* Header border */ header#header { border-bottom: 1px solid gray; } THANK YOU!! 🙂
tuanphan Posted May 26, 2021 Posted May 26, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
sheriipop Posted June 25, 2021 Posted June 25, 2021 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!
tuanphan Posted June 28, 2021 Posted June 28, 2021 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
sheriipop Posted June 28, 2021 Posted June 28, 2021 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!!
NinaK Posted March 14, 2022 Posted March 14, 2022 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!
tuanphan Posted March 15, 2022 Posted March 15, 2022 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
NinaK Posted March 16, 2022 Posted March 16, 2022 13 hours ago, tuanphan said: What is your site url? It's https://aplaceofpurity.squarespace.com PW: SqeTb94 (work in progress...) Thank you!
nhinhidesigns Posted September 13, 2022 Posted September 13, 2022 @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/
tuanphan Posted September 17, 2022 Posted September 17, 2022 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
maddie123 Posted November 28, 2022 Posted November 28, 2022 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?
tuanphan Posted December 2, 2022 Posted December 2, 2022 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
karamickell5 Posted September 19 Posted September 19 @tuanphan Can you help me with the same question as above? I'd like my site page text to have a border on the top and bottom like https://www.oakandstonetherapy.com/ or https://thesixpence.com/ I would like the board to be on every page except the home page. My site is https://www.clubhousevenue.com/ Thanks!!
tuanphan Posted September 20 Posted September 20 On 9/19/2024 at 7:04 AM, karamickell5 said: @tuanphan Can you help me with the same question as above? I'd like my site page text to have a border on the top and bottom like https://www.oakandstonetherapy.com/ or https://thesixpence.com/ I would like the board to be on every page except the home page. My site is https://www.clubhousevenue.com/ Thanks!! You can use this CSS code @media screen and (min-width:992px) { .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 100% !important; flex-direction: column; width: 100% !important } .header-display-desktop { flex-direction: column } .tweak-fixed-header .header .header-announcement-bar-wrapper { padding-left: 0; padding-right: 0 } .header-nav { width: 103.2%; border-top: 1px solid #000; padding-top: 0px; padding-left: .7vw !important; border-bottom: 1px solid #000 !important } div.header-nav-item { padding-left: 1.5vw !important; padding-right: 1.5vw !important; } div.header-display-desktop a.btn { position: absolute; right: 0; top: calc(~"50% - 20px") } .header-actions.header-actions--left { position: absolute; left: 0; top: 50%; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
karamickell5 Posted September 23 Posted September 23 @tuanphan Thanks! Can you fill in that section with a light gray now so it looks more like this: https://thesixpence.com/
tuanphan Posted September 24 Posted September 24 22 hours ago, karamickell5 said: @tuanphan Thanks! Can you fill in that section with a light gray now so it looks more like this: https://thesixpence.com/ You mean add a background color for fullwidth nav? You can change this line .header-nav { width: 103.2%; border-top: 1px solid #000; padding-top: 0px; padding-left: .7vw !important; border-bottom: 1px solid #000 !important } to this .header-nav { width: 103.2%; border-top: 1px solid #000; padding-top: 0px; padding-left: .7vw !important; border-bottom: 1px solid #000 !important; background-color: #f3eeea; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment