tenboss Posted September 17, 2020 Share Posted September 17, 2020 Site URL: https://www.bubbleteaboss.com Hi, Can someone help me. I've tried existing codes in the forums but they do not work. How do you add vertical lines (dividers) between the items of your navigation bar/header? So far, I only manage to add a | by adding one to the navigation title (in the Pages section) but this is not working right because the | also changes color once you put your cursor on it (e.g. "Home |" becomes a secondary color instead of just "Home"). Does anyone have a CSS code? Thank you 🙂 Link to comment
creedon Posted September 17, 2020 Share Posted September 17, 2020 Try the following as a starting point. Put in Design > Custom CSS. .header-nav-item a:after { content: " | "; } .header-nav-item:last-child a:after { content: ''; } The previous is for a 7.1 site. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
tenboss Posted September 17, 2020 Author Share Posted September 17, 2020 Hi, Thanks for responding. The code works fine. Only thing not sure if it can be fixed is the line under the page selected does not just stay/float under the word it is under the tab like in the picture. Is this something that can be fixed? Many Thanks Link to comment
creedon Posted September 17, 2020 Share Posted September 17, 2020 (edited) I think we should try another method. When I came up with the CSS I was working with your home page so I didn't take into account the underline. It looks like getting things to line up with just some CSS is tricky. Replace the CSS code I gave with the following. .header-nav-item--divider { padding: 0.1em 0; } Put the following in Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Put the following in Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( '.header-display-desktop .header-nav-item' ) .slice ( 0, -1 ) .after ( '<div class="header-nav-item header-nav-item--divider">' + '|' + '</div>' ); } ); </script> What this is doing is using Javascript, jQuery and some CSS to add the dividers in a way that shouldn't interfere with the underline. Let us know how it goes. Edited September 17, 2020 by creedon LucyDesigns 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
tenboss Posted September 18, 2020 Author Share Posted September 18, 2020 Hi Yah! it all works perfectly. That is a huge help really helps clean up my site. Thanks again.😃 Link to comment
tenboss Posted September 18, 2020 Author Share Posted September 18, 2020 Hi I just discovered another error I am unable to fix. On my FAQ page the table I created with the code below is correct on the Desktop and android phone, however on a Apple device the font changes. Do you know how I can ensure the font stays the same on both systems? Many Thanks code used directly into FAQ page using content block option: <style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; overflow:hidden;padding:10px 5px;word-break:normal;} .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px; font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;} .tg .tg-6rvr{border-color:#cca1f7;font-family:"Comic Sans MS", cursive, sans-serif !important;;text-align:left;vertical-align:top} .tg .tg-ituh{background-color:#cca1f7;border-color:#333333;font-family:"Comic Sans MS", cursive, sans-serif !important;; font-weight:bold;text-align:left;vertical-align:top} .tg .tg-lyg7{background-color:#cca1f7;border-color:#333333;font-family:"Comic Sans MS", cursive, sans-serif !important;; font-weight:bold;text-align:center;vertical-align:top} .tg .tg-0j8n{border-color:#cca1f7;font-family:"Comic Sans MS", cursive, sans-serif !important;;text-align:center;vertical-align:top} </style> <table class="tg"> <thead> <tr> <th class="tg-ituh">Region</th> <th class="tg-lyg7">Price</th> <th class="tg-lyg7">Courier </th> <th class="tg-lyg7">Free Shipping</th> </tr> </thead> <tbody> <tr> <td class="tg-6rvr">UK </td> <td class="tg-0j8n">£2.50</td> <td class="tg-0j8n">Royal Mail 1st Class Signed for (no tracking)</td> <td class="tg-0j8n">Order Value £30</td> </tr> <tr> <td class="tg-6rvr">Europe & Ireland </td> <td class="tg-0j8n">£8.50</td> <td class="tg-0j8n">Royal Mail 1st Class Track & Sign</td> <td class="tg-0j8n"> Order Value £30</td> </tr> <tr> <td class="tg-6rvr">Worldwide</td> <td class="tg-0j8n"> £10.00</td> <td class="tg-0j8n">Royal Mail International Track & Sign </td> <td class="tg-0j8n"> Order Value £30</td> </tr> </tbody> </table> Link to comment
creedon Posted September 18, 2020 Share Posted September 18, 2020 8 hours ago, tenboss said: however on a Apple device the font changes I'm unable to detect the issue you are seeing. I tried on my iPhone 5 with iOS v10.x. Please tell us more about your Apple device? What is it? iPhone? iPad? What model? What iOS version? What browser are you using? Which version? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Sas208 Posted January 26, 2021 Share Posted January 26, 2021 Hi, I've added the top code and it works perfectly but it adds the line after page titles in the folders. How do I remove it from there? Thank you Link to comment
creedon Posted January 26, 2021 Share Posted January 26, 2021 @Sas208 Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
emmabrinker Posted September 22, 2022 Share Posted September 22, 2022 On 9/17/2020 at 7:45 PM, creedon said: I think we should try another method. When I came up with the CSS I was working with your home page so I didn't take into account the underline. It looks like getting things to line up with just some CSS is tricky. Replace the CSS code I gave with the following. .header-nav-item--divider { padding: 0.1em 0; } Put the following in Settings > Advanced > Code Injection > HEADER. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Put the following in Settings > Advanced > Code Injection > FOOTER. <script> $( ( ) => { $( '.header-display-desktop .header-nav-item' ) .slice ( 0, -1 ) .after ( '<div class="header-nav-item header-nav-item--divider">' + '|' + '</div>' ); } ); </script> What this is doing is using Javascript, jQuery and some CSS to add the dividers in a way that shouldn't interfere with the underline. Let us know how it goes. could you help me do this for my site? www.charmingoilylife.com i entered it on my site but the dividers are black and everything is move over far to the right so it is covering my shopping cart in the menu. thank you! Link to comment
tuanphan Posted September 24, 2022 Share Posted September 24, 2022 On 9/22/2022 at 9:51 AM, emmabrinker said: could you help me do this for my site? www.charmingoilylife.com i entered it on my site but the dividers are black and everything is move over far to the right so it is covering my shopping cart in the menu. thank you! I see you added line. Do you still need help? 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!) Link to comment
sharine Posted October 31, 2022 Share Posted October 31, 2022 (edited) @tuanphan, I’m trying to do the same and would like some help, please! Site: https://eagle-mayflower-l68a.squarespace.com I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left. Edited November 11, 2022 by sharine Link to comment
tuanphan Posted November 4, 2022 Share Posted November 4, 2022 On 10/31/2022 at 10:44 AM, sharine said: @tuanphan, I’m trying to do the same and would like some help, please! Site: https://eagle-mayflower-l68a.squarespace.com Password: bashy I’m trying to get my navigation links evenly spread out across the full width of the container, centered, with vertical lines separating each. It keeps justifying left. You solved with this CSS? .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 } .header-nav-item:hover { background-color: #6e6843 !important } .header-nav-item--divider { padding: .1rem 0; border-right: 1px solid #000 !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!) Link to comment
sharine Posted November 11, 2022 Share Posted November 11, 2022 @tuanphan, yes! Thanks so much. 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