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

Navigation
0

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 causes you to create a navbar similar to this:

Thetogglerfunctionofthebootstrapmakesitlooklikethisonaphone/tablet:

WhatdoIwant?Workingwiththedivwhenitisinthe"toggled" form, I want to manipulate the appearance of it only when it is viewing in the mobile for example, because when I change the properties in css, it also changes when it is not collapsed or full screen.

I want to improve usability by having the navbar menu fill the entire screen of the phone, not just the left corner, so that it increases the selection field to reach the desired content.

    
asked by anonymous 05.10.2017 / 22:35

2 answers

1

For this you should make your site responsive by introducing the use of @media to configure the site's appearance depending on the type of device used when accessing it.

Basically, you can configure it as follows:

1) For styles applicable to the site accessed at a resolution of 700px or greater (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 can be useful too. Then visit the link below.

link

    
05.10.2017 / 23:13
0

Finally I got the desired result with the tip of @Cububy Freitas. Now the nav list item is filling the whole line for easier access on smaller devices. 

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

.nav-cel {
    display: inline-grid;
}}
    
20.10.2017 / 13:09
How to get the url of different forms and validate via javascript Problem when rotating an object continuously