How can I remove border when It becomes a menu dropdown? (Angular)

Question

I have a navigation bar with 3 "items". In small screens this navigation bar becomes a menu dropdown. During full screen navigarion bar I have a border-right of 1px in "nav-item-1" (Item 1). How can I remove that border when it becomes a menu dropdown? Btw, I´m using the Angular framework and HTML5, SCSS, TypeScript, Bootstrap 4. I have this in the header.html:

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav col-10">
          <li class="nav-item-1">
            <a class="nav-link" href="#main">Item 1</a>
          </li>
        </ul>
      </div>
     
         

My scss for the border on the "nav-item-1":

.nav-item-1{
    border-right: 1px solid white;
    font-size: 125%;
   }

When it becomes a menu dropdown (small screens) the border is still there and it`s ugly. How can I remove it when it becomes menu dropdown, but keep it in "normal" navigation bar?

Answer 1

In jscript create a function that when the menu becomes a dropdown it adds a class, such as "borderless", to the items (and removes it when the menu returns to normal).

In CSS modify it so the class has no border.

Answer 2

if u want a Typescript solution then use [ngClass]

<div [ngClass]="{'nav-item-border': navHasBorder}"></div> 

ngClass dynamically add or remove ur class on an element when navHasBorder is true or false respectively.

If u want More advance typescript Solution Use Layout from CDK stackblitz

Answer 3

I found the asnwer to my question in a different question:

Hide or Remove Left Border When Collapsing to Small Screen Using Bootstrap

Use:

@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

".border" may change, dependes on the name of the class, in my case is ".nav-item-1". Number of px (767px) may also change, dependes on what you want.