How do I customize a Navbar only when it is "collapsed" with bootstrap 4?

Question

I have the following code:

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-md navbar-light navperson">
    <!-- Brand -->
    <a class="navbar-brand" href="#"><img class="img-fluid logo" src="imagens/bonfireicon.png"></a>
    <!-- Hide Button -->
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-content"
    aria-expanded="false" aria-label="Toogle Navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- NavBar Content -->
    <div class="collapse navbar-collapse" id="nav-content">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link hvr-sweep-to-right" href="#">
                    <span class="fa-stack">
                        <span class="fa fa-square-o fa-stack-2x"></span>
                        <span class="fa fa-home fa-stack-1x"></span>
                    </span>
                    Home
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link hvr-sweep-to-right" href="#">
                    <span class="fa-stack">
                        <span class="fa fa-square-o fa-stack-2x"></span>
                        <span class="fa fa-flask fa-stack-1x"></span> 
                    </span>
                    Estus Flasks
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link hvr-sweep-to-right" href="#">
                    <span class="fa-stack">
                        <span class="fa fa-square-o fa-stack-2x"></span>
                        <span class="fa fa-bomb fa-stack-1x"></span>
                    </span>
                    Capra Demon
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link hvr-sweep-to-right" href="#">
                    <span class="fa-stack">
                        <span class="fa fa-square-o fa-stack-2x"></span>
                        <span class="fa fa-ravelry fa-stack-1x"></span>
                    </span>
                    Areas
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link hvr-sweep-to-right" href="#">
                    <span class="fa-stack">
                        <span class="fa fa-square-o fa-stack-2x"></span>
                        <span class="fa fa-shield fa-stack-1x"></span>
                    </span>
                    Legendary Items
                </a>
            </li>
        </ul>
        <!--Login Button Triggers Modal-->
        <form class="form-inline my-2 my my-lg-0">
            <button type="button" data-toggle="modal" data-target="#modal-login" class="btn btn-outline-info">Logar</button>
        </form>
    </div>
</nav>

This code makes you create a navbar similar to this:

The bootstrap Toggler function makes it look like this on a mobile/tablet:

What do I want? Working with the div when she’s in "toggled" form, I want to manipulate her appearance only when she is viewing on mobile for example, because when I change the properties in css, ends up changing also when she is not "collapsed" or in full screen.

I want to improve usability by making the navbar menu fill the entire screen of the phone, and not only in the left corner, so that increase the selection field to achieve the desired content.

Answer 1

To do this you must make your site responsive by introducing the use of @media to configure the appearance of the site according to the type of device used when accessing it.

Basically, you can configure as follows:

1) For styles applicable to the website accessed in a resolution equal to or greater than 700px (from your computer for example):

@media screen and (min-width: 769px){
}

2) For smaller devices:

@media all and (max-width: 768px){
}

The "min-width" property determines that the style will be applied when the screen resolution is within the specified limit.

There are several other @media tag configuration options that may be very useful as well. Please visit the link below.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

I finally got the desired result with the @Caiuby Freitas tip. Now the Nav list item (link) is filling the whole line for easy access on smaller devices.

@media all and (max-width: 765px) {

.nav-cel {
    display: inline-grid;
}}