MAC1 Posted August 24, 2023 Share Posted August 24, 2023 Hi, web: https://ellipse-teal-dl5w.squarespace.com/ pass: 2 i found this code provided by @tuanphan to achieve a custom color on the underline header menu selection, which works great: Here's the code i'm using: /* Change the underline color of the top menu links */ .header-nav-item a { position: relative; text-decoration: none !important; color: #43c6ff; /* Set the color of the link */ } .header-nav-item a::after { content: ""; position: absolute; left: 0; bottom: -2px; /* Adjust the positioning of the underline */ width: 100%; height: 2px; /* Adjust the height of the underline */ background-color: #43c6ff; /* Set the color of the underline */ visibility: hidden; opacity: 0; transition: opacity 0.4s; } .header-nav-item a:hover::after, .header-nav-item a:focus::after, .header-nav-item--active a::after { visibility: visible; opacity: 1; } /* Optional: Change the underline color when the link is active or focused */ .header-nav-item--active a::after { background-color: #43c6ff; /* Set the color of the underline when the link is active */ } div.header-nav-item a { display: inline-block; } div.header-menu-nav-item a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: #43c6ff; visibility: hidden; opacity: 0; transition: opacity .4s; } div.header-menu-nav-item a:hover::after { visibility: visible; opacity: 1; } .header-menu-nav-item-content { position: relative; display: inline-block; pointer-events: none; } works great for desktop header, but when its mobile this happens: black line is back for current page: blue line only appears on hover over and its too thin and close to the text, unlike on header which is perfect desired outcome for mobile menu: 1. more padding under text like on header 2. black line gone like on header 3. thicker line that is width of text like on header The code i have there is so close but needs adjustments to make the header desktop and header mobile look the same. Cheers Link to comment
Solution Web_Solutions Posted August 24, 2023 Solution Share Posted August 24, 2023 (edited) 59 minutes ago, MAC1 said: Hi, web: https://ellipse-teal-dl5w.squarespace.com/ pass: 2 i found this code provided by @tuanphan to achieve a custom color on the underline header menu selection, which works great: Here's the code i'm using: /* Change the underline color of the top menu links */ .header-nav-item a { position: relative; text-decoration: none !important; color: #43c6ff; /* Set the color of the link */ } .header-nav-item a::after { content: ""; position: absolute; left: 0; bottom: -2px; /* Adjust the positioning of the underline */ width: 100%; height: 2px; /* Adjust the height of the underline */ background-color: #43c6ff; /* Set the color of the underline */ visibility: hidden; opacity: 0; transition: opacity 0.4s; } .header-nav-item a:hover::after, .header-nav-item a:focus::after, .header-nav-item--active a::after { visibility: visible; opacity: 1; } /* Optional: Change the underline color when the link is active or focused */ .header-nav-item--active a::after { background-color: #43c6ff; /* Set the color of the underline when the link is active */ } div.header-nav-item a { display: inline-block; } div.header-menu-nav-item a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: #43c6ff; visibility: hidden; opacity: 0; transition: opacity .4s; } div.header-menu-nav-item a:hover::after { visibility: visible; opacity: 1; } .header-menu-nav-item-content { position: relative; display: inline-block; pointer-events: none; } works great for desktop header, but when its mobile this happens: black line is back for current page: blue line only appears on hover over and its too thin and close to the text, unlike on header which is perfect desired outcome for mobile menu: 1. more padding under text like on header 2. black line gone like on header 3. thicker line that is width of text like on header The code i have there is so close but needs adjustments to make the header desktop and header mobile look the same. Cheers Please add this code on Custom CSS panel @media screen and (max-width:767px) { .header-menu { .header-menu-nav-item a{ display: inline-block !important; .header-menu-nav-item-content { background: none !important; } } .header-menu-nav-item--active a::after { opacity: 1 !important; visibility: visible !important; } } } Edited August 24, 2023 by Web_Solutions Ainul, Kobir, MAC1 and 1 other 3 1 If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible. Link to comment
MAC1 Posted August 24, 2023 Author Share Posted August 24, 2023 Works perfect thank you again @Web_Solutions :) Link to comment
Web_Solutions Posted August 24, 2023 Share Posted August 24, 2023 5 minutes ago, MAC1 said: Works perfect thank you again @Web_Solutions🙂 Welcome! If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks MD Rofik Website Designer and Digital Marketer ☕Am I helpful? Want to offer me a coffee? ✉ Send me a message if needed any help. I'll try to reply as soon as possible. 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