1

I put the navbar above the header if that affects anything.

How it currently looks like:

Can't figure out how to make search bar like the navbar. Also, the search element is not working with CSS. If anyone can help that would be amazing! I'm lost. I am trying to make the search bar and the navbar looks like the rest of the tab buttons and elements. Same height as the other elements. 

 HTML
   <div class="navbar">
    <a class="active" href="#home">Home</a>
    <a herf="#about">About </a>
    <a herf="#patientinfo"> Patient Information </a>
    <div class="dropdown">
    <button class = "dropbutton">Select Hospital
    </button>
     <div class= "dropdown-content">
      <a href="#">Hospital</a>
       <a href="#">Hospital</a>
       <a href="#">Hospital</a>
         <a href="#">Hospital</a>
      </div>
      </div>
    <div class ="search">
            <form action="/action_page.php"> <!--backend -->
            <input type="text" name="search" placeholder="Search">
            <button type="submit">Submit</button>
           </form>
          <!--search bar -->
        </div>
       </div>

CSS 
       .navbar {
         overflow: hidden;
        background-color: black;
        font-family: 'Roboto';
        width: 100%;

          }
        .navbar a {
         float: left;
         font-size: 16px;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
         }
        .navbar a.active{  /*shows active tab */
        background-color:red;
        color:white;
         }
        .navbar input[type=text] {
        background-color: inherit;
        color: white;
        width: 25%;
        float: left;
        padding: inherit;
        font-size: 16px;

          }

         }
        .navbar .search button { 
         float: left;
         padding: inherit;
         margin:0;
         margin-top:0px;
         background-color: inherit;
         font-size:15px;
         cursor:pointer;
      border:none;
    }
    .dropdown {
      float:left;
      overflow: hidden;
    }
    .dropdown .dropbutton {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
    .navbar a:hover, .dropdown:hover .dropbutton {
        background-color: red;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

       .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

       .dropdown-content a:hover {
        background-color: red;
       }

       .dropdown:hover .dropdown-content {  /* WHEN U HOVER OVER IT SHOWS THE MENU 
             */
          display: block;
        }
Jlim2377
  • 61
  • 7
  • Where is your HTML code for search and nav bar? If you search you would find many examples like this: https://stackoverflow.com/questions/18619740/how-to-add-a-search-box-with-icon-to-the-navbar-in-bootstrap-3 – aman Nov 09 '18 at 19:36
  • I just uploaded it. Sorry im new to stack overflow – Jlim2377 Nov 09 '18 at 19:48
  • @jim2377 you could just add style="margin-top:10px" to your div and it would work. But as I pointed out look at the link in my previous post. If you are using bootstrap, that is a better was to do so. – aman Nov 09 '18 at 20:06
  • @aman thanks do you know how to fix the search button? – Jlim2377 Nov 09 '18 at 20:13
  • What is the issue with search button? – aman Nov 09 '18 at 20:25
  • @aman https://i.stack.imgur.com/6wPUR.png this is how it looks. My search button is not responding to CSS for some reason – Jlim2377 Nov 09 '18 at 20:34
  • I think part of your problem was that you weren't setting a height for your navbar. – Raqem Nov 09 '18 at 20:53
  • @Jlim2377 did you add the margin code I shared? – aman Nov 12 '18 at 13:50

1 Answers1

0
This is how I would handle this. But note that you will have to do some responsive styles. I put in a fail safe so you dont have bad overlapping. Note that it looks alittle off on the code snippet because its so small, you should check it out by pasting it in a fresh html file.


.navbar {
         overflow: hidden;
         background-color: black;
         font-family: 'Roboto';
         width: 100%;
         position: relative;
        height: 47px;

           }
         .navbar a {
          float: left;
          font-size: 16px;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          }
         .navbar a.active{  /*shows active tab */
         background-color:red;
         color:white;
          }
         
     .dropdown {
       float:left;
       overflow: hidden;
     }
     .dropdown .dropbutton {
         font-size: 16px;
         border: none;
         outline: none;
         color: white;
         padding: 14px 16px;
         background-color: inherit;
         font-family: inherit;
         margin: 0;
     }
     .navbar a:hover, .dropdown:hover .dropbutton {
         background-color: red;
     }
     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #f9f9f9;
         min-width: 160px;
         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
         z-index: 1;
     }

        .dropdown-content a {
         float: none;
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         text-align: left;
     }

        .dropdown-content a:hover {
         background-color: red;
        }

        .dropdown:hover .dropdown-content {  /* WHEN U HOVER OVER IT SHOWS THE MENU 
              */
           display: block;
         }

    .search {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
    .search-input {
      height: 47px;
      border: none;
      background-color: inherit;
      color: white;
      font-size: 16px;
    }
    .search-input:active {
      background-color: red;
    }
    .search-input:focus {
      background-color: red;
    }
    .search-button {
      padding: 16px 10px;
      height: 47px;
      border: none;
      color: white;
      background-color: black;
      font-size: 16px;
      cursor:pointer;
    }
    .nav-links {
      padding-right: 280px;
      height: 47px;
    }
<div class="navbar">
  <div class="nav-links">
      <a class="active" href="#home">Home</a>
      <a herf="#about">About </a>
      <a herf="#patientinfo"> Patient Information </a>
      <div class="dropdown">
        <button class = "dropbutton">Select Hospital
        </button>
         <div class= "dropdown-content">
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
          <a href="#">Hospital</a>
        </div>
      </div>
    </div>
    <div class="search">
      <form action="/action_page.php"> <!--backend -->
      <input class="search-input" type="text" name="search" placeholder="Search">
      <button class="search-button" type="submit">Submit</button>
     </form>
    <!--search bar -->
  </div>
 </div>
Raqem
  • 424
  • 2
  • 9