Twitter Bootstrap Question posted in

How can I make a bootstrap navbar mobile friendly? – Twitter bootstrap

I don’t have a specific code example, just looking for a general answer.

I know my navbar doesn’t resize well in mobile, so is there a good/correct way to fix this? Someone mentioned using CSS @media queries, but I don’t know anything about them.

If I do need media queries, what’s a good resource to learn about them? Everything else looks fine when I use col-md-(), just not the navbar.

body {
  font-family: 'News Cycle', sans-serif;
  font-size: 175%;
}

li {
  float: right;
  text-align: left
}

link {
  link
}

a:link {
  text-decoration: none;
  color: #000000;
}

a:visited {
  text-decoration: none;
  color: #000000;
}

a:hover {
  text-decoration: none;
  color: #232323;
}

a:active {
  text-decoration: underline;
  color: #000000;
}

.main-section {
  background-image: url(../img/back.jpg);
  background-size: cover;
  height: 1000px;
  color: white;
}

.navbar {
  position: fixed;
  width: 100%;
}

.container-fluid {
  padding-left: 0px;
}

.main {
  padding: 400px 0px 360px 0px;
  text-shadow: 1px black;
}

.nav {
  float: right;
  text-align: left;
  font-size: 20px;
  letter-spacing: .5px;
}

.headers-bfg {
  padding-left: 35px;
}

.navbar-brand {
  font-size: 20px;
  letter-spacing: .5px;
}

h1 {
  font-size: 70px;
}

h3 {
  font-size: 35px;
}

.fa-circle {
  color: gray;
  font-size: .4em;
  padding-top: 23px
}

.info-panel {
  padding: 50px 50px 50px 50px;
}

.balloon-sect {
  background-color: skyblue;
}

.flower-sect {
  background-color: #f4f6f9;
}

.gift-sect {
  background-color: #ce6640;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Balloons Flowers and Gifts</title>

  <link rel="stylesheet" type="text/css" href="css/bfg.css">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=News+Cycle" type="text/css" rel="stylesheet">

  <!-- Spent two hours trying to figure out why my customized CSS wouldn't load in, then realized that I put it in front of bootstrap... -->

  <script src="https://use.fontawesome.com/7a267289ed.js"></script>
  <link rel="stylesheet" type="text/css" href="css/bfg.css">

  <link rel="icon" href="img/icon.png">

</head>

<body>
  <div class="container-fluid main-section">
    <nav class=" navbar navbar-default">
      <div class="container-fluid col-md-12 col-xs-12">
        <div class="headers-bfg">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">BFG</a>
          </div>
          <div class="navbar-header">
            <a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
          </div>
        </div>
        <ul class=" nav navbar-nav ">
          <li><a href="#">Balloons</a></li>
          <li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
          <li><a href="#">Flowers</a></li>
          <li><i class="fa fa-circle" aria-hidden="true"></i></li>
          <li><a href="#">Gifts</a></li>
          <li><i class="fa fa-circle" aria-hidden="true"></i></li>
          <li><a href="#">Hours</a></li>
        </ul>
      </div>
    </nav>
    <div class="">
      <div class="row">
        <div class="col-md-12 col-xs-12 text-center main">
          <h1>Balloons Flowers and Gifts</h1>
          <h3>The perfect way to brighten someone's day, and make them smile!</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 col-xs-12 text-center info-panel balloon-sect">
        <a href="#">
          <h2>Balloons</h2>
        </a>
        <p> Our hand crafted balloon creations are a hit at every! We have a wide variety of colored and themed balloons ranging from Pokemon GO to a life sized stormtrooper! We also do balloon things for events!</p>
      </div>
      <div class="col-md-12 col-xs-12 text-center info-panel flower-sect">
        <a href="#">
          <h2>Flowers</h2>
        </a>
        <p>Our Flowers are perfect for any occasion! We have a wide variety all year round, just be sure to call for availability! We can do prom flowers, funeral arrangements, and everything in between!</p>
      </div>
      <div class="col-md-12 col-xs-12 text-center info-panel gift-sect">
        <a href="#">
          <h2>Gifts</h2>
        </a>
      </div>
      <div class="col-md-12 col-xs-12 text-center">
        <a href="#">
          <h2>Hours</h2>
        </a>
      </div>
    </div>
  </div>




  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  html css twitter-bootstrap
Tags:

2

Answers


  1. 0

    You can learn more about CSS @media queries here:

    templatemonster.com/blog/css-media-queries…

    It explains about media queries and how to make it work on other devices, and it includes an IE 7 and IE 8 fallback mechanism.

    IF you want to learn Bootstrap, you can use bootstrap GUI designing tool:

    codepley.com/go/bp/new

    Login or Signup to reply.
  2. 0

    I do two things. (When the first one not working properly, I’ll go to the second method.)

    1. First Method.

      I search for common mobile device sizes and used them to adjust the navbar according to it. Common sizes are 320px, 375px, 480px, 640px, 768px, 1024px.

      @media (max-width: 600px) {
      Your code here
      }

    2. Second Method

      If my common sizes are not correctly working I tried to reduce the sizes one by one and try to get the absolutely correct matches that may not destroy the website.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search