GOMAPRODS Posted January 25 Share Posted January 25 (edited) Password : gomaprods2023++ Hi guys, hope you're well. I found a bit of code that I'm trying to adapt. But with no success, maybe you can help ? When we scroll down, the background of the menu on the left is highlighted to keep track in which section we are in. I just wanted to change that so that typo becomes bold, but I can't find what passage in the code I'm supposed to modify. (Tried a bit of everything). Here are the codes : <div class="wrap"> <nav class="nav"> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> <li><a href='#section5'>Section 5</a></li> </ul> </nav> <div class="main"> <section id="section1" class="section1"> <p>Scroll the page up and down and the left hand menu will automatically highlight the current section. No JS was harmed in producing this function.</p> <p>This demo is proof of concept only and requires on a few 'magic numbers' so is of limited use other than an exercise in what can be done with CSS alone.</p> <p>Enjoy...</p> <p>scroll</p> <p>scroll</p> </section> <section id="section2" class="section2"> <p>scroll</p> <p>scroll</p> </section> <section id="section3" class="section3"> <p>scroll</p> <p>scroll</p> </section> <section id="section4" class="section4"> <p>scroll</p> <p>scroll</p> </section> <section id="section5" class="section5"> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> <p>scroll</p> </section> </div> </div> html { box-sizing: border-box; overflow: hidden; margin: 0; padding: 0; } *, *:before, *:after { box-sizing: inherit; } body { scroll-behavior: smooth; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */ height: 100vh; margin: 0; padding: 0; } ul { margin: 0; padding: 0; list-style: none; } .wrap { display: flex; align-items: flex-start; position: relative; background: #000000; } .main { flex: 1 0 0; background: #000000; } .main p { padding: 0 10px; margin: 0.5rem 0 1rem; } .main .item1 { margin: 0 0 0 -220px; /* magic number alert*/ } .nav { width: 200px; position: -webkit-sticky; position: sticky; top: 0; margin-right: 1rem; z-index: 2; } .nav a { padding: 5px 10px; text-decoration: none; display: block; height: 2rem; /* magic number alert*/ color:white; } .nav a:hover { background: #ccc; } /*fleche*/ .wrap section:before { content: "\2190"; display: block; margin: 0 1rem 0 0; position: -webkit-sticky; position: sticky; top: 1px; left: 0; height: 2rem; /* magic number alert*/ line-height: 2rem; text-align: right; background: linear-gradient(to left, green, green 10px), linear-gradient(to left, #eee, #ccc); background-repeat: no-repeat; background-attachment: fixed; background-size: 200px 2rem; width: 198px; margin-left: -215px; color: transparent; } @supports (-webkit-hyphens: none) { .wrap .main section:before { color: red; background: transparent; } } .wrap .section2:before { top: 2rem; /* magic number alert*/ background-position: 0 2rem; } /* magic number alerts below */ .wrap .section3:before { top: 4rem; background-position: 0 4rem; } .wrap .section4:before { top: 6rem; background-position: 0 6rem; } .wrap .section5:before { top: 8rem; background-position: 0 8rem; } Edited January 25 by GOMAPRODS Link to comment
tuanphan Posted January 28 Share Posted January 28 What is 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!) Link to comment
GOMAPRODS Posted February 2 Author Share Posted February 2 Hi tuanphan, here is the url : https://www.gomaproductions.com/new-page2. Link to comment
tuanphan Posted February 5 Share Posted February 5 You mean which clicking on these items > Make it bold? 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
GOMAPRODS Posted February 8 Author Share Posted February 8 That's right. When we click or scroll, the background changes. I want to make it bold instead. Link to comment
tuanphan Posted February 18 Share Posted February 18 Try this code to Website > Website Tools > Custom CSS .wrap a:visited { font-weight: bold !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment