Home / Questions / 94232
Accepted
ByGroxD
Asked: 2020-08-11 10:28:55 +0800 CST 2020-08-11 10:28:55 +0800 CST

How to get cloud styling below a Bootstrap Navbar

  • 772

How could I get the following style in my navbar in bootstrap 3, referencing the cloud style? The layout I want to get is the following:

enter image description here

I've tried with IMG as a border but I can't do it.

.navbar-principal .img-logo {
  width: 28px;
  height: 28px;
  display: inline-block;
}

.navbar-principal .navbar-brand,
.navbar-principal .navbar-brand li a:visited,
.navbar-principal .navbar-nav li a {
  color: #fff;
  font-weight: 500;
}

.navbar-cover .navbar-nav li a {
  color: #66757f;
  font-weight: 500;
}

.navbar-principal .navbar-nav .open a,
.navbar-principal .navbar-nav .open a:hover,
.navbar-principal .navbar-nav li a:hover, 
.navbar-principal .navbar-nav li a:focus, 
.navbar-principal .navbar-nav .active a, 
.navbar-principal .navbar-nav .active a:hover {
  color: #fff;
  background: rgba(0, 0, 0, .2);
}

.navbar-cover .navbar-nav li a:hover{
  background-color: #f9f9f9;
}

.navbar-principal .navbar-form .input-group input  {
  height: 30px;
}

.navbar-principal .input-group-addon {
  background-color: #FFFFFF;
  border: 1px solid #E3E3E3;
  border-left: 0px solid #E3E3E3;
}

.navbar-principal .navbar-brand:hover {
  color: #fff;
  font-weight: 500;
}

.navbar-principal .dropdown-menu .notification-row a{
  color: #2DBB7F;
}

.navbar-principal a i { 
  font-size: 20px;
}

.img-nav{
  width: 25px;
  height: 25px;
  margin-top: -3px;
  border-radius: 4px;
}

.form-control, .input-group-addon {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.icons-nav{
  width: 25px;
  height: 25px;
  margin-top: -3px;
  -webkit-filter: invert(100%);
    filter: invert(100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Baby Histories</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="http://demos.bootdey.com/clean-note/assets/css/timeline.css">
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top navbar-principal">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">
            <b>Baby Histories</b>
          </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse">
          <div class="col-md-5 col-sm-4">         
            <form class="navbar-form">
              <div class="form-group" style="display:inline;">
                <div class="input-group" style="display:table;">
                  <input class="form-control" name="search" placeholder="Search..." autocomplete="off" type="text">
                  <span class="input-group-addon" style="width:1%;">
                    <span class="fa fa-search"></span>
                  </span>
                </div>
              </div>
            </form>
          </div>        

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-comments"></i></a></li>
            <li><a href="#" class="nav-controller"><i class="fa fa-bell"></i></a></li>
            <li>
              <a href="#">
                <img src="https://www.shareicon.net/data/512x512/2016/11/14/852449_globe_512x512.png" class="icons-nav">
                Inicio
              </a>
            </li>
            <li class="active">
              <a href="#">
                Wilson Pinzón 
                <img src="http://static.wixstatic.com/media/fa846e_0178f9176c8544d09624f3949519ec19.jpg_256" class="img-nav">
              </a>
            </li>
          </ul>
        </div>

      </div>
  </nav>
  
</body>
</html>

html5

1 Answers

  1. Best Answer

    First of all you must have the image you want to repeat background-image: url("http://themes.iamabdus.com/kidkite/1.0/img/shape.png");and know towards which axis you want to repeat xor y, in this case towards x, background-repeat: repeat-x;, the rest is adjustment to properly position the element

    .navbar-default:after {
    background-image: url("http://themes.iamabdus.com/kidkite/1.0/img/shape.png");
    height: 9px;
    background-repeat: repeat-x;
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
}

    Once that is done we can add the rule to the element that we want to apply, I leave you your example, I made some changes, change the color bodyto black so that it could be observed correctly

    .navbar-principal .img-logo {
  width: 28px;
  height: 28px;
  display: inline-block;
}

.navbar-principal .navbar-brand,
.navbar-principal .navbar-brand li a:visited,
.navbar-principal .navbar-nav li a {
  color: #fff;
  font-weight: 500;
}

.navbar-cover .navbar-nav li a {
  color: #66757f;
  font-weight: 500;
}

.navbar-principal .navbar-nav .open a,
.navbar-principal .navbar-nav .open a:hover,
.navbar-principal .navbar-nav li a:hover,
.navbar-principal .navbar-nav li a:focus,
.navbar-principal .navbar-nav .active a,
.navbar-principal .navbar-nav .active a:hover {
  color: #fff;
  background: rgba(0, 0, 0, .2);
}

.navbar-cover .navbar-nav li a:hover {
  background-color: #f9f9f9;
}

.navbar-principal .navbar-form .input-group input {
  height: 30px;
}

.navbar-principal .input-group-addon {
  background-color: #FFFFFF;
  border: 1px solid #E3E3E3;
  border-left: 0px solid #E3E3E3;
}

.navbar-principal .navbar-brand:hover {
  color: #fff;
  font-weight: 500;
}

.navbar-principal .dropdown-menu .notification-row a {
  color: #2DBB7F;
}

.navbar-principal a i {
  font-size: 20px;
}

.img-nav {
  width: 25px;
  height: 25px;
  margin-top: -3px;
  border-radius: 4px;
}

.form-control,
.input-group-addon {
  -webkit-transition: all 300ms linear;
  -moz-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  -ms-transition: all 300ms linear;
  transition: all 300ms linear;
}

.icons-nav {
  width: 25px;
  height: 25px;
  margin-top: -3px;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

body{
 background:black !important;
}

.navbar-default:after {
    background-image: url("http://themes.iamabdus.com/kidkite/1.0/img/shape.png");
    height: 9px;
    background-repeat: repeat-x;
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>Baby Histories</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" href="http://demos.bootdey.com/clean-note/assets/css/timeline.css">
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top navbar-principal">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="index.html">
          <b>Baby Histories</b>
        </a>
      </div>

      <div id="navbar" class="collapse navbar-collapse">
        <div class="col-md-5 col-sm-4">
          <form class="navbar-form">
            <div class="form-group" style="display:inline;">
              <div class="input-group" style="display:table;">
                <input class="form-control" name="search" placeholder="Search..." autocomplete="off" type="text">
                <span class="input-group-addon" style="width:1%;">
                    <span class="fa fa-search"></span>
                </span>
              </div>
            </div>
          </form>
        </div>

        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="fa fa-comments"></i></a></li>
          <li><a href="#" class="nav-controller"><i class="fa fa-bell"></i></a></li>
          <li>
            <a href="#">
              <img src="https://www.shareicon.net/data/512x512/2016/11/14/852449_globe_512x512.png" class="icons-nav"> Inicio
            </a>
          </li>
          <li class="active">
            <a href="#">
                Wilson Pinzón 
                <img src="http://static.wixstatic.com/media/fa846e_0178f9176c8544d09624f3949519ec19.jpg_256" class="img-nav">
              </a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

</body>

</html>

    • 2