Search Bar sizing and Sticky Nav Bar help

HTML & CSS
1

I need help making my search bar smaller in my heading so its nicely aligned with my header also how can i make my navbar a sticky navbar. Any help please?
910×618 21.7 KB

here is my code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
      height: 200px;
      background: #aaa;
  }


  </style>
</head>
<body>

<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
  <h1 class="w3-margin w3-jumbo">SmartNotes</h1>
  <p class="w3-xlarge">To Gloalize Education around the world</p>
      <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
  </div>
</nav>
</header>
<!--header ends here-->

<!--navbar starts here-->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" style:>SmartNotes</a>
    </div>
      <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Math</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu2">Science</a>
    </li>
  </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
  </div>
</nav>
<!--Navbar ends here-->
2

You can’t really make the search bar match the length of some anonymous text but you can add a min and max-width to control it better.

e.g.I would move the button next to the input so that flex automatically sizes them the same height and then do this.

<div class="input-group inp-group-max">
      <input type="text" class="form-control" placeholder="Search" name="search">
      <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
</div

Note the extra class I added.

.inp-group-max{
	width:100%;
	max-width:32rem;
	min-width:280px;
	margin:auto;
}

These days I would use position:sticky and avoid JS. Browser that don;t support it just get the normal nav.

e.g.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
.fakeimg {
	height: 200px;
	background: #aaa;
}
.inp-group-max {
	width:100%;
	max-width:32rem;
	min-width:280px;
	margin:auto;
}
.navbar{position:-webkit-sticky;position:sticky;top:0;background:rgba(255,255,255, 0.8);}

</style>
</head>
<body>

<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
  <h1 class="w3-margin w3-jumbo">SmartNotes</h1>
  <p class="w3-xlarge">To Gloalize Education around the world</p>
  <form class="navbar-form navbar-left" action="/action_page.php">
    <div class="input-group inp-group-max">
      <input type="text" class="form-control" placeholder="Search" name="search">
      <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
    </div>
  </form>
  </div>
  </nav>
</header>
<!--header ends here--> 

<!--navbar starts here-->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header"> <a class="navbar-brand" href="#" style:>SmartNotes</a> </div>
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li>
      <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Math</a> </li>
      <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Science</a> </li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button>
        </div>
      </div>
    </form>
  </div>
</nav>
<!--Navbar ends here-->

<div class="container">
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
  <p>content to scroll</p>
</div>
</body>
</html>

If you are unfamiliar with bootstrap4 and a beginner with css then you are probably better off using some of the default themes.

3 Likes
3

Thank you then any suggestions how i could learn more css and quickly?

4

Mozilla has some good basic tutorials:

3 Likes
5

Practice, practice and more practice :slight_smile:

Everything you need is out there on the web but don’t just copy and paste. Copy the code and see how things are done and then try for yourself. Too many people just copy and paste and learn nothing. It gets the job in hand done but then they stumble on the next job.

I’ve been doing this stuff for over 20 years and still only scratching the surface. You’ll never know it all but you must master the basics and then know where to look if you get stuck.

I always learn most when I try to solve problems myself - even if it takes a lot of time.

In the forums you can always ask for help when you get stuck and people will be eager to help. However if you just ask for a solution without trying yourself then people are reluctant to just offer code.

5 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.