Problem adapting code.

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;
}

@yubrajs any suggestion ?

What is site url?

Hi tuanphan, 

here is the url : https://www.gomaproductions.com/new-page2.

You mean which clicking on these items > Make it bold?

That's right.

When we click or scroll, the background changes.

I want to make it bold instead.

Any idea ?

Try this code to Website > Website Tools > Custom CSS

.wrap a:visited {
    font-weight: bold !important;
}