RDC Posted April 29, 2022 Share Posted April 29, 2022 (edited) Site URL: https://halibut-opossum-3b5b.squarespace.com Hey guys, I would love to add border like on this website to my navigation bar: https://www.ulloadesignco.com My site is: https://halibut-opossum-3b5b.squarespace.com PW: Braddon1 Can anyone help please? Thank you so much! Edited April 29, 2022 by RDC Site URL fix Link to comment
tuanphan Posted May 1, 2022 Share Posted May 1, 2022 You mean add lines between nav items? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
RDC Posted May 2, 2022 Author Share Posted May 2, 2022 Hey @tuanphan Yes please! And was hoping to create the different colour hover effect if possible? Thanks so much! Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 On 5/2/2022 at 7:51 PM, RDC said: Hey @tuanphan Yes please! And was hoping to create the different colour hover effect if possible? Thanks so much! Add to Design > Custom CSS /* Fullwidth navigation border*/ .header-announcement-bar-wrapper { padding-left: 0px !important; padding-right: 0px !important; } .header-display-desktop { flex-direction: column; } .header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; } nav.header-nav-list { display: flex; width: 100%; border-top: 1px solid white; border-bottom: 1px solid white; } .header-nav-item a { line-height: initial; padding-top: 10px !important; padding-bottom: 10px !Important; } .header-nav-item { border-left: 1px solid white; border-right: 1px solid white; margin: 0 !important; padding-left: 1vw; padding-right: 1vw; margin-left: -1px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
meltmelt Posted June 3, 2022 Share Posted June 3, 2022 On 5/5/2022 at 11:03 AM, tuanphan said: Add to Design > Custom CSS /* Fullwidth navigation border*/ .header-announcement-bar-wrapper { padding-left: 0px !important; padding-right: 0px !important; } .header-display-desktop { flex-direction: column; } .header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; } nav.header-nav-list { display: flex; width: 100%; border-top: 1px solid white; border-bottom: 1px solid white; } .header-nav-item a { line-height: initial; padding-top: 10px !important; padding-bottom: 10px !Important; } .header-nav-item { border-left: 1px solid white; border-right: 1px solid white; margin: 0 !important; padding-left: 1vw; padding-right: 1vw; margin-left: -1px !important; } How do I get the menu items covering the whole row, so there is no empty columns on the side? Link to comment
meltmelt Posted June 8, 2022 Share Posted June 8, 2022 @tuanphan Do you have a solution to my previous comment? :) Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 On 6/8/2022 at 5:18 PM, meltmelt said: @tuanphan Do you have a solution to my previous comment? 🙂 What is your site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
meltmelt Posted June 16, 2022 Share Posted June 16, 2022 https://earthworm-fox-pgyk.squarespace.com/Password: gold888 On 6/11/2022 at 10:18 AM, tuanphan said: What is your site url? We can check easier Link to comment
tuanphan Posted June 17, 2022 Share Posted June 17, 2022 7 hours ago, meltmelt said: https://earthworm-fox-pgyk.squarespace.com/Password: gold888 Don't remove any code in your current code Add this to Design > Custom CSS nav.header-nav-list { justify-content: space-between !important; } meltmelt 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
meltmelt Posted June 17, 2022 Share Posted June 17, 2022 4 hours ago, tuanphan said: Don't remove any code in your current code Add this to Design > Custom CSS nav.header-nav-list { justify-content: space-between !important; } Thank you ❤️ Link to comment
annicatter16 Posted August 10, 2022 Share Posted August 10, 2022 Hi is there a way to remove the spacing? I used this code but there is space between the items. https://grouper-hypersphere-mkrw.squarespace.com/ password:12345 Link to comment
tuanphan Posted August 11, 2022 Share Posted August 11, 2022 On 8/10/2022 at 2:10 PM, annicatter16 said: Hi is there a way to remove the spacing? I used this code but there is space between the items. https://grouper-hypersphere-mkrw.squarespace.com/ password:12345 Remove these yellow? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted August 14, 2022 Share Posted August 14, 2022 On 8/12/2022 at 2:05 PM, annicatter16 said: yes please First, change this code nav.header-nav-list { justify-content: space-between !important; } to this nav.header-nav-list { justify-content: center !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
annicatter16 Posted August 15, 2022 Share Posted August 15, 2022 Done but still looks very odd with spaces out the side Link to comment
annicatter16 Posted August 15, 2022 Share Posted August 15, 2022 Also problem with cart icon display on both desktop and mobile Link to comment
tuanphan Posted August 18, 2022 Share Posted August 18, 2022 Try adding this new nav.header-nav-list { justify-content: center !important; flex-wrap: nowrap; } nav.header-nav-list>div { width: 20%; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
annicatter16 Posted August 18, 2022 Share Posted August 18, 2022 Thanks I have changed url to: https://calliope-primrose-s254.squarespace.com/ password:12345 it works but there is weird line on the first box and the cart is in the middle. It also looks weird on mobile. Any fixes? Thankyou Link to comment
tuanphan Posted August 21, 2022 Share Posted August 21, 2022 On 8/18/2022 at 2:40 PM, annicatter16 said: Thanks I have changed url to: https://calliope-primrose-s254.squarespace.com/ password:12345 it works but there is weird line on the first box and the cart is in the middle. It also looks weird on mobile. Any fixes? Thankyou The site is private now. You mean underline on first item? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
annicatter16 Posted August 21, 2022 Share Posted August 21, 2022 Not private now. Yes the line on first item- but mainly the shopping cart and the problems with the header appears on mobile is the problem Link to comment
tuanphan Posted August 24, 2022 Share Posted August 24, 2022 On 8/22/2022 at 4:35 AM, annicatter16 said: Not private now. Yes the line on first item- but mainly the shopping cart and the problems with the header appears on mobile is the problem Add to Design > Custom CSS div.header-nav-item--active a { background-image: none !important; } Can you describe in detail problem on mobile header? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
naayb Posted July 11 Share Posted July 11 hi @tuanphan, i've followed this thread with code until the end, and my code is almost exactly the same (overall width and line thickness adjusted, see below). the only problem is the navigation is not appearing as a dropdown option/hamburger or anywhere in the mobile, how can i resolve that, please? thanks! /* Fullwidth navigation border*/ .header-announcement-bar-wrapper { padding-left: 0px !important; padding-right: 0px !important; } .header-display-desktop { flex-direction: column; } .header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; } nav.header-nav-list { display: flex; width: 100%; border-top: 2px solid black; border-bottom: 2px solid black; } .header-nav-item a { line-height: initial; padding-top: 10px !important; padding-bottom: 10px !Important; } .header-nav-item { border-left: 1px solid black; border-right: 1px solid black; margin: 0 !important; padding-left: 1vw; padding-right: 1vw; margin-left: -1px !important; margin-right: -1px !important; } nav.header-nav-list { justify-content: center !important; flex-wrap: nowrap; } nav.header-nav-list>div { width: 30%; } Link to comment
naayb Posted July 11 Share Posted July 11 Additionally, @tuanphan, how can I make the header fixed at the top? thanks! Link to comment
tuanphan Posted July 14 Share Posted July 14 On 7/11/2023 at 7:32 PM, naayb said: Additionally, @tuanphan, how can I make the header fixed at the top? thanks! What is your site url? We can check problem easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
lizanne Posted August 14 Share Posted August 14 Hi, Thank you so much for this helpful code! I am also having an issue with the mobile menu not being visible after I install this CSS. My site isn't live yet. How can I enable you to see it? Here is the code I used (which caused the mobile menu to disappear): /* Fullwidth navigation border*/ .header-announcement-bar-wrapper { padding-left: 50px !important; padding-right: 0px !important; } .header-display-desktop { flex-direction: column; } .header-title-nav-wrapper { flex: 0 0 100% !important; margin-right: auto; width: 100% !important; } nav.header-nav-list { display: flex; width: 100%; background-color: #6f889f; } .header-nav-item a { line-height: initial; padding-top: 10px !important; padding-bottom: 10px !Important; } .header-nav-item { border-left: none; border-right: 1px solid white; margin: 0 !important; padding-left: 2vw; padding-right: 1.5vw; margin-left: 1px !important; } body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper a { color: #ffffff; } body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper a:hover { color: #333333; } body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper .header-nav-item--active a { color: #333333; } nav.header-nav-list { justify-content: space-between !important; } nav.header-nav-list { justify-content: left !important; flex-wrap: nowrap; } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment