tuanphan Posted March 7, 2021 Author Share Posted March 7, 2021 On 3/4/2021 at 12:39 AM, els said: Yes. On every single blogpost. If you scroll down and then hover over the menu you cannot read the submenu now, because it's white on white. On the rest of the site I used the black minimal theme in the header. Here I cannot do that, for it will make the entire background of the blogposts black. I would prefer it if the submenu "box" turns black with white text if you scroll down. Like the rest of the site. Would that be possible? Hi. Looks fine here? els 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!) Link to comment
els Posted March 7, 2021 Share Posted March 7, 2021 16 hours ago, tuanphan said: Hi. Looks fine here? I've been hobbying with the code you gave me before. /* Shrink header */ .shrink { background: white !important; } .shrink *:not(a.btn) { color: black !important; } .shrink .header-nav-folder-item a { color: white !important; } I changed the last white into grey, that gave me the result of your screenshot. I'd prefer to have it black and white though. This is a workaround. Link to comment
tuanphan Posted March 8, 2021 Author Share Posted March 8, 2021 10 hours ago, els said: I've been hobbying with the code you gave me before. /* Shrink header */ .shrink { background: white !important; } .shrink *:not(a.btn) { color: black !important; } .shrink .header-nav-folder-item a { color: white !important; } I changed the last white into grey, that gave me the result of your screenshot. I'd prefer to have it black and white though. This is a workaround. So do you still need help on this? 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
els Posted March 15, 2021 Share Posted March 15, 2021 (edited) On 3/8/2021 at 9:40 AM, tuanphan said: So do you still need help on this? Yes please, thank you. I set it back to your original code. I would like the menu overlay to be black also in the seperate blog posts. So: white on top, like it is now and when you scroll down that the menu that shows when you hoover over it turns black. With white text on it. Just like on all the other pages. This is the code you gave me, which I applied: /* Shrink header */ .shrink { background: white !important; } .shrink *:not(a.btn) { color: black !important; } .shrink .header-nav-folder-item a { color: white !important; } If this is too hard to achieve (because the standard menu text in blogposts is black, contrary to the white text on the other pages, maybe it is possible to add an image on top of each blogpost, in the header I mean. I can't see how that could be done either. Edited March 15, 2021 by els Link to comment
thehouseofredvelvet Posted March 30, 2021 Share Posted March 30, 2021 This is amazing. But, how do you do this for the Footer navigation? Would you just change it to Footernavigation in the title? Thank you. thehouseofredvelvet.com Link to comment
tuanphan Posted March 31, 2021 Author Share Posted March 31, 2021 On 3/30/2021 at 8:53 AM, thehouseofredvelvet said: This is amazing. But, how do you do this for the Footer navigation? Would you just change it to Footernavigation in the title? Thank you. thehouseofredvelvet.com Add to Design > Custom CSS /* Footer nav active */ footer#footer .collection.active a { color: green; } thehouseofredvelvet 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!) Link to comment
thehouseofredvelvet Posted March 31, 2021 Share Posted March 31, 2021 5 hours ago, tuanphan said: Add to Design > Custom CSS /* Footer nav active */ footer#footer .collection.active a { color: green; } Would you know how to fix the two buttons in my Pre-Footer for the Memoirs pages only? They work on all other pages, but for the blog post pages, they are hovering with a white and keeping a white text. All other pages, they highlight white, but go to a black text. I am open to changing the style of the button, but do you know how to change this? Thank you!! https://www.thehouseofredvelvet.com/memoirs/welcome Link to comment
tuanphan Posted April 5, 2021 Author Share Posted April 5, 2021 On 3/31/2021 at 10:52 PM, thehouseofredvelvet said: Would you know how to fix the two buttons in my Pre-Footer for the Memoirs pages only? They work on all other pages, but for the blog post pages, they are hovering with a white and keeping a white text. All other pages, they highlight white, but go to a black text. I am open to changing the style of the button, but do you know how to change this? Thank you!! https://www.thehouseofredvelvet.com/memoirs/welcome Hi. You mean remove donate button underline? Add this to Design > Custom CSS div#preFooter .button-block a { text-decoration: none !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
Juelz Posted May 2, 2021 Share Posted May 2, 2021 Hey Tuanphan, I've read through this thread and already used some helpful links. I added the CSS for a custom color when hovering over the navigation menu. And I added the CSS to remove the line underneath the chosen link. Can you help me with also adding a color when hovering over the shop categories on the left, regardless of which category I am in atm? Here is the link when in Earrings section: https://www.soulmaidjewelry.com/shop/earrings Would there have to be a CSS added for each category or is there a general code? My "shop" link in the navigation menu brings you to a page with photos which I added as I wanted the landing page to be categories rather than all items showing randomly on one page. Link to comment
tuanphan Posted May 4, 2021 Author Share Posted May 4, 2021 On 5/3/2021 at 6:27 AM, Juelz said: Hey Tuanphan, I've read through this thread and already used some helpful links. I added the CSS for a custom color when hovering over the navigation menu. And I added the CSS to remove the line underneath the chosen link. Can you help me with also adding a color when hovering over the shop categories on the left, regardless of which category I am in atm? Here is the link when in Earrings section: https://www.soulmaidjewelry.com/shop/earrings Would there have to be a CSS added for each category or is there a general code? My "shop" link in the navigation menu brings you to a page with photos which I added as I wanted the landing page to be categories rather than all items showing randomly on one page. Add to Design > Custom CSS /* Shop category color on hover */ li.category-item a:hover { color: red; } Juelz and junecz 1 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!) Link to comment
Juelz Posted May 4, 2021 Share Posted May 4, 2021 THIS IS AWESOME!!! Thanks so much!!! Link to comment
SouthernSunEvents Posted July 10, 2021 Share Posted July 10, 2021 Trying to find this in the forums but this page topic is the closest thing I can find. I'm trying to have the nav text weight higher on my index page. Is there a way to adjust the nav text on the index page only? http://www.southernsunevents.com PW: sse2020 Thanks! Link to comment
tuanphan Posted July 13, 2021 Author Share Posted July 13, 2021 On 7/11/2021 at 12:03 AM, SouthernSunEvents said: Trying to find this in the forums but this page topic is the closest thing I can find. I'm trying to have the nav text weight higher on my index page. Is there a way to adjust the nav text on the index page only? http://www.southernsunevents.com PW: sse2020 Thanks! Add to Design > Custom CSS /* Homepage nav text */ body.homepage .Header-nav-inner { position: relative; top: -30px; } 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
SouthernSunEvents Posted July 14, 2021 Share Posted July 14, 2021 On 7/13/2021 at 7:54 AM, tuanphan said: Add to Design > Custom CSS /* Homepage nav text */ body.homepage .Header-nav-inner { position: relative; top: -30px; } Thanks for sending this over. I just realized my earlier post was worded a little wonky. I'm looking for a heavy text weight. Keeping this code though because I like the nav text higher up so thanks for this one too! Link to comment
tuanphan Posted July 15, 2021 Author Share Posted July 15, 2021 17 hours ago, SouthernSunEvents said: Thanks for sending this over. I just realized my earlier post was worded a little wonky. I'm looking for a heavy text weight. Keeping this code though because I like the nav text higher up so thanks for this one too! And what is your problem now? 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
SouthernSunEvents Posted July 15, 2021 Share Posted July 15, 2021 5 hours ago, tuanphan said: And what is your problem now? trying to make nav text bolder on just the home page Link to comment
tuanphan Posted July 17, 2021 Author Share Posted July 17, 2021 On 7/16/2021 at 1:35 AM, SouthernSunEvents said: trying to make nav text bolder on just the home page Add to Design > Custom CSS /* Homepage nav bold */ body.homepage a.Header-nav-item { font-weight: bold; } SouthernSunEvents 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!) Link to comment
Billie123 Posted September 21, 2021 Share Posted September 21, 2021 Hi Tuanphan, You're amazing! Currently all the pages within the folder that's active have the active colour (which also means when you go back to that folder, other page options loose their hover effect). I was wondering if there's a way to get around the secondary navigation active state? I want the folder + page with active colour but the other pages within folder to go back to inactive colour. Hope that makes sense.... Many thanks for your wisdom! Link to comment
tuanphan Posted September 24, 2021 Author Share Posted September 24, 2021 On 9/22/2021 at 5:53 AM, Billie123 said: Hi Tuanphan, You're amazing! Currently all the pages within the folder that's active have the active colour (which also means when you go back to that folder, other page options loose their hover effect). I was wondering if there's a way to get around the secondary navigation active state? I want the folder + page with active colour but the other pages within folder to go back to inactive colour. Hope that makes sense.... Many thanks for your wisdom! Can you share link to your site? 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
dovely Posted October 27, 2021 Share Posted October 27, 2021 Hi @tuanphan we are also working through a similar customization with our current site at the link below. We were able to add the code you shared above, but we are also trying to add a bold hover affect. We tried adding font-weight: bold !important; but its not taking. Is there another way to execute this? https://carillon-vibraphone-7w3k.squarespace.com/ Password: 3m!ily2021 Also, we would like to apply the same navigation customizations to the secondary font that is on the landing page at the link above. These are a little more tricky because they are just links instead of actual navigation. Any help you can provide would be greatly appreciated. Than you! Link to comment
tuanphan Posted October 29, 2021 Author Share Posted October 29, 2021 On 10/28/2021 at 12:23 AM, dovely said: Hi @tuanphan we are also working through a similar customization with our current site at the link below. We were able to add the code you shared above, but we are also trying to add a bold hover affect. We tried adding font-weight: bold !important; but its not taking. Is there another way to execute this? https://carillon-vibraphone-7w3k.squarespace.com/ Password: 3m!ily2021 Also, we would like to apply the same navigation customizations to the secondary font that is on the landing page at the link above. These are a little more tricky because they are just links instead of actual navigation. Any help you can provide would be greatly appreciated. Than you! Hi, Your links is Text Block, not Navigation Items, so the code I shared won't work. You need to use JavaScript to achieve this. If you use a Business Plan or higher, let me know, I will try testing some code 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
dovely Posted October 29, 2021 Share Posted October 29, 2021 Hi @tuanphan thank you for letting us know. Yes, we have the business plan. Let me know if I can help answer any other questions. Thank you! Link to comment
dovely Posted October 29, 2021 Share Posted October 29, 2021 Oh also @tuanphan is it possible to have the link that the person is on bolded after they've clicked it? Let us know. Thank you so much! Link to comment
tuanphan Posted October 31, 2021 Author Share Posted October 31, 2021 On 10/30/2021 at 3:17 AM, dovely said: Oh also @tuanphan is it possible to have the link that the person is on bolded after they've clicked it? Let us know. Thank you so much! Try adding to Settings > Advanced > Code Injection > Footer <script> (function(){ /*set class for the active button*/ document.addEventListener('DOMContentLoaded', function() { const currentPage = document.location.pathname; const currentBtns = document.querySelectorAll('div#page-section-6171899d7350d744ad20e71a .text-block'); const currentLink = currentPage.split('/').at(-1); currentBtns.forEach(btn => { const btnLink = btn.querySelector('a').getAttribute('href').split('/').at(-1); if(btnLink == currentLink) { btn.classList.add('btn--active'); } }) }) })() </script> <style> /*style the active button*/ .archive-group.btn--active { background: black; color: green; } </style> 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment