CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Rehan
Rehan

Reputation: 4013

navbar not being responsive if the screen size is reduced

I have developed a custom navbar using BootStrap which collapse horizontally when the button is clicked. It works fine but when I reduced the size of the screen it should collapse vertically just like the classic examples given in BootStrap site. I am not able to find any solution,when I googled I came through a point all measurement should be in % instead of px,I tried but my navbar doesnt behave correctly.

/*html

    <!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animate.css">
    <script src="homePage.js"></script>
</head>

<body>
    <nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
        <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
        <h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
        <div class="collapse animated fadeInLeft" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
            </ul>
        </div>
    </nav>
    <div class="container"></div>
</body>

</html>

//css

   /*changing the background color*/

body {
    background-color: #F8F9F9;
}


/*moving the navBrand name to left after the toggle icon*/

.move-header {
    padding-left: 60px;
}


/*making the border none for the toggle button*/

.navbar-toggler {
    border: none;
}


/*making the blue border none,it comes when clicking the toggle*/

.navbar-toggler.active.focus,
.navbar-toggler.active:focus,
.navbar-toggler.focus,
.navbar-toggler:active.focus,
.navbar-toggler:active:focus,
.navbar-toggler:focus {
    outline: 0;
}

/*navbar settings*/

.navbar {
    margin-top: 40px;
    height: 54px;
    border-bottom-right-radius: 200px;
    border-top-right-radius: 200px;
    flex-flow: row nowrap;
    display: inline-flex;
}


/*navbar items settings*/

.navbar-nav {
    flex-flow: row nowrap;
    padding-top: -10px;
}


/*giving gaps between each nav items*/

.nav-item {
    margin-right: 40px;
}


/*nullifying the default animation*/

.collapsing {
    -webkit-transition: height 0.01s;
    -moz-transition: height 0.01s;
    -ms-transition: height 0.01s;
    -o-transition: height 0.01s;
    transition: height 0.01s;
    margin-bottom: -15px;
}

Upvotes: 1

Views: 4255

Answers (3)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

its cause of nowrap; on .navbar-nav. you can fix this by remove the height of .navbar and set the flex-flow:row wrap; on .navbar class. LiveFiddleLink Check the fiddle .

Below I have comment out where I have change. If you have any questuon ask me in comment

  /*navbar settings*/
  .navbar {
    margin-top: 40px;/*Remove Height from here*/
    border-bottom-right-radius: 200px;
    border-top-right-radius: 200px;
    display: inline-flex;
    flex-flow: row nowrap;
  }
  /*navbar items settings*/

  .navbar-nav {
    flex-flow: row wrap;/*Change nowrap to wrap*/
  }
  /*giving gaps between each nav items*/

  .navbar-nav .nav-link {/*change the class nav-item to nav-link*/
    padding: 0.5em .5em;
  }

Update: You can use media query also. LiveFiddle Media Query Using media query you dont need to change the nowrap. just need to change the direction at the screen 475px.

 @media only screen and (max-width:475px){
.navbar{
  padding:0.5rem 2rem;
}  
 .navbar-nav{
     flex-flow:column nowrap;
   }

 }

Upvotes: 1

mat
mat

Reputation: 3

It looks like you're missing the media query that tells the browser when to change the navbar from a row-flex layout to a vertical/collapsed layout. This media query should be placed in the CSS file along with a .collapsed class or something similar to style the navbar when the screen size falls within the width range you specify. This screen size is typically between 0px and 500px wide for smartphones, or 800px wide if you want to capture tablets as well.

https://css-tricks.com/css-media-queries/

Your HTML shows a div with class="collapse" but that class is not in your attached code.

Upvotes: 0

J. Bates
J. Bates

Reputation: 31

Try making the width of the whole navbar 100%, with the contents of the navbar in px. This should change the size of the navbar in acccordance to the screen resolution, and if the navbar items exceed the pixel width of the whole bar, they will collapse. (If that makes any sense?)

Upvotes: 0

Related Questions