How to position the div at the time of Toggler Bootstrap 4

Question

Guys, I don’t know if this is the place but I have a problem with my css/bootstrap

I have a Navbar and between the nav-brand and the nav-links have a padding-left to position the text. However, when I use the Nav-Toggler to reduce the screen, the text continues with the padding, leaving the visualization and I wanted it to be under the Nav-Brand. How to solve this ? Follows the code

 <!-- Inicio do navBar -->
    <div class="mynavbar">
        <nav class="navbar navbar-fixed-top navbar-expand-lg ">
            <div class="container">
                <a class="navbar-brand"><h2>Raissa<b>Fraga</b></h2>
                    <h6>Fotografia</h6></a>

                <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                    <span class="navbar-toggler-icon"></span>

                </button>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="navbar-nav" id="navbar-nav">
                        <li class="nav-iten">
                            <a class="nav-link" href="#">Fotos</a>
                        </li>
                        <li class="nav-iten">
                            <a class="nav-link" href="#">Sobre Mim</a>
                        </li>
                        <li class="nav-iten">
                            <a class="nav-link" href="#">Contato</a>
                        </li>
                    </ul>
                </div>

            </div>
        </nav>
    </div>
    <!-- Fim do navbar -->

 body{
    font-family: 'Montserrat', sans-serif;
    object-fit: contain;
    background-blend-mode: multiply, darken;
    background-color: #363d46;
	
}

.fundo-nav{
    background-image: url(../img/fundo.png);
    height: 768px;
    width: 100%;
    object-fit: contain;
    background-blend-mode: multiply, darken;
    font-family: 'Montserrat', sans-serif;
}

.custom-toggler.navbar-toggler {
    border-color: white;         
   }
   .custom-toggler .navbar-toggler-icon {
   color: white;
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

.navbar{
    background-color: transparent !important;
}

.navbar-nav{
    padding-left: 565px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
  }
  
  .navbar-brand  h2{
  color: white;
   }
   
.navbar-brand  h6{

    color: white;
    opacity: 0.6;
 }

 .text-apresentacao h1{
    padding-top: 300px;
    text-align: center;
    color: white;

}

.text-apresentacao h3{
    text-align: center;
    color: gray;
    opacity: 0.9;
    font-family: 'Montserrat', sans-serif;
}

Answer 1

You can enter the part of your CSS that makes the padding within a media-query, this way it is applied only with certain screen size:

@media (min-width: 500px) 
{
  .navbar-nav{
    padding-left: 565px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
  }
}