Viewing the navbar-brand on smartphones

Navigation
1

I'm a newbie and would like some help with a problem I'm experiencing on my mobile site. I'm using bootstrap.

Here's the result:

ThetextSquishMonstersispastingintonavbar,thecorrectresultshouldbe:

Note:Thefirstisinamotorolag4+andthesecondinasamsungs8+.

HTML

<body><!--NAVBAR--><!--Togglebuttonforsmartphones--><navclass="navbar navbar-fixed-top">
         <button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navigation">
           &#9776;

        </button>
        <!-- GVExperience logo -->
        <a class="navbar-left float-xs-right float-sm-left" href="#"><img src="squishmonsters/img/logo-small2.png" class="imagem img-fluid" alt="gvexperience logo"/></a>

        <!-- Header menu -->
        <div class="collapse navbar-toggleable-xs" id="navigation">

            <ul class="nav navbar-nav float-sm-right">
                <li class="nav-item">
                    <a class="nav-link" href="#who">Key Features</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#work">Screenshots</a>
                </li>

            </ul>

        </div>
    </nav>
    <!-- END NAVBAR -->
    <!-- LANDING PAGE -->

      <section id="header">

        <div class="container">

            <div class="row">

                <div class="col-md-6 wow fadeIn">                
                        <h1>Squish Monsters</h1>
                <p class="subtitle">A game from GVExperinece Company.</p></br>
                <p class="lead">The monsters are calling! Join us in this journey to save the world.</p>
                <div class="paragraph">
                <p class="hidden-sm-down">Designed to be simple and intuitive, just press play and GAME ON!</br>
                Choose between Arcade mode or Staged mode and enjoy 40 different stages to play.</br>
                3 Different maps and 7 differents monsters ready to provide unique and funny moments to you and your friends.</br>
                Power ups that will blow everything up. <i>LITERALLY.</i></p>
                </div>
                <br>
                <br>
                    <a href="https://play.google.com/store/apps/details?id=com.gvexperience.squishmonsters&hl=en"> <img src="squishmonsters/img/GooglePlay800.png" class="img-fluid" alt="google play download button"/></a>
                </div>

                <div class="col-md-6 header-right hidden-sm-down wow fadeIn">
                        <span><img src="squishmonsters/img/bluemonster.png" class="img-fluid" alt="blue monster"/></a></span>
                </div>

            </div>

        </div>

      </section>

    <!-- END LANDING PAGE -->    

    <!-- KEY FEATURES -->

   <section id="who">
        <div class="container">
            <div class="row">

                <div class="col-md-6 wow">
                    <h2>Key Features</h2>
                    <hr align="left" width="50%">
                    <p class="lead">Smash cute monsters in a beautiful world</p>
                    <ul>
                        <li>Smash cute monsters in a beautiful world.</li>
                        <li>Invite your friends from facebook and check who will have the best score!</li>
                        <li>Play anywhere, anytime, you don't require wifi connection to play!</li>
                        <li>7 different monsters with unique abilities</li>
                        <li>Different Power ups to make the game more enjoyable</li>
                    </ul>
                </div>

                <div class="col-md-6 wow fadeInRight" data-wow-delay="0.5s" data-wow-duration="1s">
                    <img class="img-fluid" src="squishmonsters/img/cellphone.png" alt="smartphone with squish monsters"/>
                </div>

            </div>  
        </div>
      </section>

    <!-- END KEY FEATURES-->


    <!-- SCREENSHOTS -->

    <section id="work">
        <div class="container">

        <!-- Title of section -->
            <div class="row">

                <div class="col-md-12 wow fadeInUp">
                    <h2>Screenshots</h2>
                    <hr align="left" width="30%">
                    <p class="subtitle">Screenshots taken from real gameplay!</p>
                </div>

            </div>

            <!-- CARD 1 -->
            <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.3s">

            <div class="card">

                <div class="work-img">
                    <img class="card-img-top img-fluid" src="squishmonsters/img/jungle.png" alt="jungle map">
                </div>

                <div class="card-block">
                    <p class="card-text">Smash as many monsters as you can and improve your score!</p>
                </div>
            </div>

            </div>

            <!-- END CARD 1 -->

            <!-- CARD 2 -->
            <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.5s">

                <div class="card">
                    <div class="work-img">
                        <img class="card-img-top img-fluid" src="squishmonsters/img/frozen.png" alt="frozen map">
                    </div>

                    <div class="card-block">Get bonuses balls to improve your score!</div>

                </div>
            </div>
            <!-- END CARD 2 --> 

            <!-- CARD 3 -->
                <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.7s">

                    <div class="card">
                        <div class="work-img">
                            <img class="card-img-top img-fluid" src="squishmonsters/img/texas.png" alt="texas map">
                        </div>
                        <div class="card-block">
                            <p class="card-text">Play in different maps with 7 different cute monsters.</p>
                        </div>
                    </div>
                </div>
            <!-- END CARD 3 -->

            <!-- CARD 4 -->

                <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.9s">

                    <div class="card">
                        <div class="work-img">
                            <img class="card-img-top img-fluid" src="squishmonsters/img/explo.png" alt="special effects">
                        </div>

                        <div class="card-block">
                            <p class="card-text">Special powers make everything happen.</p>
                        </div>
                    </div>
                </div>

            <!-- END CARD 4 -->             

        </div>
    </section>
    <!-- END SCREENSHOTS -->

    <!-- DOWNLOAD -->

    <section id="download">
        <div class="container wow">
            <div class="row">
                <div class="col-md-8 col-sm-6">
                <h1>Download and play for <b>free</b> now!</h1>
                <hr align="left" width="85%">
                <br>
                    <a href="https://play.google.com/store/apps/details?id=com.gvexperience.squishmonsters&hl=en"> <img src="squishmonsters/img/GooglePlay600.png" class="img-fluid" alt="google play download button"/></a>
                    <br>
                    <br>
                    <br>
                    <br>
                </div>
            </div>
        </div>
    </section>

    <!-- END DOWNLOAD -->


    <!-- FOOTER -->

    <section id="footer">
        <div class="container wow">

            <div class="row">
                <div class="col-md-8 col-sm-6">

                    <p><b>About GVexperience</b></p>
                    <p>Founded in 2017 with the mission of create simple and funny games.</p>
                    <p>Our biggest objective is to bring tons of smiles to the world :)!</p>
                        <ul class="list-inline">
                            <li class="list-inline-item"><a href="https://www.facebook.com/squishmonsters/" target="_blank">Like us: <i class="fa fa-facebook"></i></a></li>
                        </ul>
                </div>

                <div class="col-md-4 col-sm-6">
                    <p><b>Say hello:</p></b>
                        <ul class="list-unstyled">
                            <li><p><strong><i class="fa fa-envelope"></i> Email: </strong>[email protected]</p></li>
                        </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <p>&copy; 2018 Designed by GVexperience</p>
                </div>
            </div>           
        </div>
    </section>


    <!-- END FOOTER -->

</body>
</html>

CSS 

    html,
body {
        height:100%;
    font-family: 'Exo', sans-serif;
    vertical-align: middle;
    position: relative;
}

/* For small devices configuration */
@media(max-width:768px) 
{   



    #header {
        text-align:center;
    }
    #header img {
        margin:20% auto 0;
    }
    #who {
        text-align:center;
    }
    #who img {
        margin-top:15%;
    }
    #footer {
        text-align:center;
    }
}

/* NAVBAR configuration */

.navbar {
  background-color:black !important;
  border-bottom: 1px solid #dedede;
  font-family: 'Exo', sans-serif;
}

.navbar .nav .nav-item .nav-link {
  color: #d1d1d1;
  font-size:22px;
}

.navbar .nav .nav-item .nav-link:hover {
  color: #fff;
  font-size:23px;
}

.navbar-toggler {
    color: white;
}


/*HEADER*/

#header {

    background-size:cover;
    height:100%;
    display:flex;
    align-items:center;
}

#header img {
    padding:0 0 20px;
    width:80%;
}


#header span{
    margin-left:60px;

}

#header .paragraph{

    line-height:2;
}

/*WHO*/

#who {
    padding:5rem 0;
    background-color:#F5F5F5;
}

#who li{
    line-height:3;
    font-size: medium;
}

/*WORK*/

#work {
    padding:5rem 0;
}

#work .work-img{
        position:relative;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
#work .card-block{
        font-size: small;
}

/*END WORK*/

/*Download*/

#download{
    padding:5rem 0;

}

#download img{
    position:relative;

}

/*FOOTER*/

#footer {
    padding:2rem 0;
    background-color:#484848;
    color:white;
    font-size: small;
}
#footer a {
    color:white;
}

#footer .fa {
    padding:0 5px;
}

Thank you for your attention.

    
asked by anonymous 25.02.2018 / 04:39

2 answers

0

Young your CSS and HTML had a few issues that were buggando your layout. (obs: the difference between one cell phone and another is due to the screen resolution that is much higher in S8!)

Now let's get the answer.

First , you are using the class with the wrong name in NavBar. You wrote it navbar navbar-fixed-top and should be just navbar fixed-top here you have the official documentation: link

Second , to use position:fixed in NavBar you need to give a distance in the Body so that the content below is not hidden underneath NavBar, you can read about this problem in the official documentation: link

Third , you put #header height 100%. If you put this height will throw the content off the page, then I removed that height from #header

Now the best part, the example running (click Run to see) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name=
 content=
>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>

html, body {
    height:100%;
    font-family: 'Exo', sans-serif;
    vertical-align: middle;
    position: relative;
    padding-top: 70px;
}

/* For small devices configuration */
@media(max-width:768px) 
{   
    #header {
        text-align:center;
    }
    #header img {
        margin:20% auto 0;
    }
    #who {
        text-align:center;
    }
    #who img {
        margin-top:15%;
    }
    #footer {
        text-align:center;
    }
}

/* NAVBAR configuration */

.navbar {
  background-color:black !important;
  border-bottom: 1px solid #dedede;
  font-family: 'Exo', sans-serif;
}

.navbar .nav .nav-item .nav-link {
  color: #d1d1d1;
  font-size:22px;
}

.navbar .nav .nav-item .nav-link:hover {
  color: #fff;
  font-size:23px;
}

.navbar-toggler {
    color: white;
}


/*HEADER*/

#header {

    background-size:cover;
    /* height:100%; */
    display:flex;
    align-items:center;
}

#header img {
    padding:0 0 20px;
    width:80%;
}


#header span{
    margin-left:60px;

}

#header .paragraph{

    line-height:2;
}

/*WHO*/

#who {
    padding:5rem 0;
    background-color:#F5F5F5;
}

#who li{
    line-height:3;
    font-size: medium;
}

/*WORK*/

#work {
    padding:5rem 0;
}

#work .work-img{
        position:relative;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
#work .card-block{
        font-size: small;
}

/*END WORK*/

/*Download*/

#download{
    padding:5rem 0;

}

#download img{
    position:relative;

}

/*FOOTER*/

#footer {
    padding:2rem 0;
    background-color:#484848;
    color:white;
    font-size: small;
}
#footer a {
    color:white;
}

#footer .fa {
    padding:0 5px;
}
</style>
</head>
<body>

        
    <!-- NAVBAR -->
    <!-- Toggle button for smartphones -->
    <nav class="navbar fixed-top">
            <button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navigation">
              &#9776;
   
           </button>
           <!-- GVExperience logo -->
           <a class="navbar-left float-xs-right float-sm-left" href="#"><img src="squishmonsters/img/logo-small2.png" class="imagem img-fluid" alt="gvexperience logo"/></a>
   
           <!-- Header menu -->
           <div class="collapse navbar-toggleable-xs" id="navigation">
   
               <ul class="nav navbar-nav float-sm-right">
                   <li class="nav-item">
                       <a class="nav-link" href="#who">Key Features</a>
                   </li>
   
                   <li class="nav-item">
                       <a class="nav-link" href="#work">Screenshots</a>
                   </li>
   
               </ul>
   
           </div>
       </nav>
       <!-- END NAVBAR -->
       <!-- LANDING PAGE -->
   
         <section id="header">
   
           <div class="container">
   
               <div class="row">
   
                   <div class="col-md-6 wow fadeIn">                
                           <h1>Squish Monsters</h1>
                   <p class="subtitle">A game from GVExperinece Company.</p></br>
                   <p class="lead">The monsters are calling! Join us in this journey to save the world.</p>
                   <div class="paragraph">
                   <p class="hidden-sm-down">Designed to be simple and intuitive, just press play and GAME ON!</br>
                   Choose between Arcade mode or Staged mode and enjoy 40 different stages to play.</br>
                   3 Different maps and 7 differents monsters ready to provide unique and funny moments to you and your friends.</br>
                   Power ups that will blow everything up. <i>LITERALLY.</i></p>
                   </div>
                   <br>
                   <br>
                       <a href="https://play.google.com/store/apps/details?id=com.gvexperience.squishmonsters&hl=en"> <img src="squishmonsters/img/GooglePlay800.png" class="img-fluid" alt="google play download button"/></a>
                   </div>
   
                   <div class="col-md-6 header-right hidden-sm-down wow fadeIn">
                           <span><img src="squishmonsters/img/bluemonster.png" class="img-fluid" alt="blue monster"/></a></span>
                   </div>
   
               </div>
   
           </div>
   
         </section>
   
       <!-- END LANDING PAGE -->    
   
       <!-- KEY FEATURES -->
   
      <section id="who">
           <div class="container">
               <div class="row">
   
                   <div class="col-md-6 wow">
                       <h2>Key Features</h2>
                       <hr align="left" width="50%">
                       <p class="lead">Smash cute monsters in a beautiful world</p>
                       <ul>
                           <li>Smash cute monsters in a beautiful world.</li>
                           <li>Invite your friends from facebook and check who will have the best score!</li>
                           <li>Play anywhere, anytime, you don't require wifi connection to play!</li>
                           <li>7 different monsters with unique abilities</li>
                           <li>Different Power ups to make the game more enjoyable</li>
                       </ul>
                   </div>
   
                   <div class="col-md-6 wow fadeInRight" data-wow-delay="0.5s" data-wow-duration="1s">
                       <img class="img-fluid" src="squishmonsters/img/cellphone.png" alt="smartphone with squish monsters"/>
                   </div>
   
               </div>  
           </div>
         </section>
   
       <!-- END KEY FEATURES-->
   
   
       <!-- SCREENSHOTS -->
   
       <section id="work">
           <div class="container">
   
           <!-- Title of section -->
               <div class="row">
   
                   <div class="col-md-12 wow fadeInUp">
                       <h2>Screenshots</h2>
                       <hr align="left" width="30%">
                       <p class="subtitle">Screenshots taken from real gameplay!</p>
                   </div>
   
               </div>
   
               <!-- CARD 1 -->
               <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.3s">
   
               <div class="card">
   
                   <div class="work-img">
                       <img class="card-img-top img-fluid" src="squishmonsters/img/jungle.png" alt="jungle map">
                   </div>
   
                   <div class="card-block">
                       <p class="card-text">Smash as many monsters as you can and improve your score!</p>
                   </div>
               </div>
   
               </div>
   
               <!-- END CARD 1 -->
   
               <!-- CARD 2 -->
               <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.5s">
   
                   <div class="card">
                       <div class="work-img">
                           <img class="card-img-top img-fluid" src="squishmonsters/img/frozen.png" alt="frozen map">
                       </div>
   
                       <div class="card-block">Get bonuses balls to improve your score!</div>
   
                   </div>
               </div>
               <!-- END CARD 2 --> 
   
               <!-- CARD 3 -->
                   <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.7s">
   
                       <div class="card">
                           <div class="work-img">
                               <img class="card-img-top img-fluid" src="squishmonsters/img/texas.png" alt="texas map">
                           </div>
                           <div class="card-block">
                               <p class="card-text">Play in different maps with 7 different cute monsters.</p>
                           </div>
                       </div>
                   </div>
               <!-- END CARD 3 -->
   
               <!-- CARD 4 -->
   
                   <div class="col-md-3 col-sm-6 wow fadeIn" data-wow-delay="0.9s">
   
                       <div class="card">
                           <div class="work-img">
                               <img class="card-img-top img-fluid" src="squishmonsters/img/explo.png" alt="special effects">
                           </div>
   
                           <div class="card-block">
                               <p class="card-text">Special powers make everything happen.</p>
                           </div>
                       </div>
                   </div>
   
               <!-- END CARD 4 -->             
   
           </div>
       </section>
       <!-- END SCREENSHOTS -->
   
       <!-- DOWNLOAD -->
   
       <section id="download">
           <div class="container wow">
               <div class="row">
                   <div class="col-md-8 col-sm-6">
                   <h1>Download and play for <b>free</b> now!</h1>
                   <hr align="left" width="85%">
                   <br>
                       <a href="https://play.google.com/store/apps/details?id=com.gvexperience.squishmonsters&hl=en"> <img src="squishmonsters/img/GooglePlay600.png" class="img-fluid" alt="google play download button"/></a>
                       <br>
                       <br>
                       <br>
                       <br>
                   </div>
               </div>
           </div>
       </section>
   
       <!-- END DOWNLOAD -->
   
   
       <!-- FOOTER -->
   
       <section id="footer">
           <div class="container wow">
   
               <div class="row">
                   <div class="col-md-8 col-sm-6">
   
                       <p><b>About GVexperience</b></p>
                       <p>Founded in 2017 with the mission of create simple and funny games.</p>
                       <p>Our biggest objective is to bring tons of smiles to the world :)!</p>
                           <ul class="list-inline">
                               <li class="list-inline-item"><a href="https://www.facebook.com/squishmonsters/" target="_blank">Like us: <i class="fa fa-facebook"></i></a></li>
                           </ul>
                   </div>
   
                   <div class="col-md-4 col-sm-6">
                       <p><b>Say hello:</p></b>
                           <ul class="list-unstyled">
                               <li><p><strong><i class="fa fa-envelope"></i> Email: </strong>[email protected]</p></li>
                           </ul>
                   </div>
               </div>
   
               <div class="row">
                   <div class="col-md-12">
                       <p>&copy; 2018 Designed by GVexperience</p>
                   </div>
               </div>           
           </div>
       </section>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

</body>
</html>
    
28.02.2018 / 16:55
0

Place all navbar code inside a container: 

<!-- NAVBAR -->
<!-- Toggle button for smartphones -->
<div class="container">
<nav class="navbar navbar-fixed-top">
     <button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navigation">
       &#9776;

    </button>
    <!-- GVExperience logo -->
    <a class="navbar-left float-xs-right float-sm-left" href="#"><img src="squishmonsters/img/logo-small2.png" class="imagem img-fluid" alt="gvexperience logo"/></a>

    <!-- Header menu -->
    <div class="collapse navbar-toggleable-xs" id="navigation">

        <ul class="nav navbar-nav float-sm-right">
            <li class="nav-item">
                <a class="nav-link" href="#who">Key Features</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#work">Screenshots</a>
            </li>

        </ul>

    </div>
</nav>
</div>
<!-- END NAVBAR -->
    
28.02.2018 / 12:37
Help with prediction of variables with machine learning and unbalanced classes in R (caret) How to rename files in a .CSV list in your output with PHP and CURL?