Sign Up

Have an account? Sign In Now

Sign In

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Sign InSign Up

Softans

Softans Logo Softans Logo
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
Home/ Questions/Q 1716
In Process
Charlis
Charlis
Asked: May 12, 20222022-05-12T06:48:37+00:00 2022-05-12T06:48:37+00:00

Search Bar Is Not In Coded Position HTML

again.

I am stuck with my search bar where it is not the position and the size i had coded in it.

Supposedly the search bar shall be look like in the following link: https://www.w3schools.com/howto/howto_css_searchbar.asp

But eventually, after i typed the coded, the search bar had different size and is not the position i wanted to be. here is the image below: search bar not in position

Your help is much appreciated as i am still learning in this programming languages.

 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="footer.php">

  <!-- ---------------------------------------START OF CSS -------------------------------- -->
  <style>
    /*----------------------START OF CSS PAGE BACKGROUND-----------------*/
    
    body {
      background-color: white;
      font-size: 20px;
      margin: 0;
    }
    /*----------------------END OF CSS PAGE BACKGROUND-----------------*/
    /*----------------------START OF CSS STICKY NAVBAR AND DROPDOWN BUTTONS-----------------*/
    
    ul {
      display: flex;
      list-style-type: none;
      margin: 0;
      padding: 0;
      /* overflow: hidden; */
      background-color: #38444d;
      min-height: 45px;
      position: -webkit-sticky;
      /*Safari */
      position: sticky;
      top: 0;
    }
htmlsearch bar
  • 0
  • 1 1 Answer
  • 27 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook
  • Report

1 Answer

  • Voted
  • Oldest
  • Recent
  1. Charlis
    2022-05-12T06:50:44+00:00Added an answer on May 12, 2022 at 6:50 am
    This answer was edited.
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {box-sizing: border-box;}
    
    body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    .topnav {
    overflow: hidden;
    background-color: #e9e9e9;
    }
    
    .topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    }
    
    .topnav a:hover {
    background-color: #ddd;
    color: black;
    }
    
    .topnav a.active {
    background-color: #2196F3;
    color: white;
    }
    
    .topnav input[type=text] {
    float: right;
    padding: 6px;
    margin-top: 8px;
    margin-right: 16px;
    border: none;
    font-size: 17px;
    }
    
    @media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
    }
    
    .topnav input[type=text] {
    border: 1px solid #ccc; 
    }
    }
    </style>
    </head>
    <body>
    
    <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
    <input type="text" placeholder="Search..">
    </div>
    
    <div style="padding-left:16px">
    <h2>Responsive Search Bar</h2>
    <p>Navigation bar with a search box inside of it.</p>
    <p>Resize the browser window to see the responsive effect.</p>
    <p>For more examples on how to add a submit button and icon inside the search bar, go back to the tutorial.</p>
    </div>
    
    </body>
    </html>
    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question
  • Popular
  • Answers
  • Ghulam Nabi

    Why are the British confused about us calling bread rolls ...

    • 5 Answers
  • Alex

    application has failed to start because no appropriate graphics hardware ...

    • 4 Answers
  • Jerry

    Add file to native target programmatically via tuist/XcodeProj

    • 4 Answers
  • Ghulam Nabi
    Ghulam Nabi added an answer To add code coverage to a React project created without… February 3, 2023 at 7:01 am
  • Ghulam Nabi
    Ghulam Nabi added an answer You could try using the NetworkBoundResource architecture pattern. The idea… February 3, 2023 at 6:53 am
  • Ghulam Nabi
    Ghulam Nabi added an answer To programmatically set a package as the device owner, you… February 3, 2023 at 6:46 am

Trending Tags

android c++ cypress flutter java javascript python selenium testng webdriver

Top Members

Robert

Robert

  • 3 Questions
  • 1k Points
Luci

Luci

  • 5 Questions
  • 1k Points
Kevin O Brien

Kevin O Brien

  • 2 Questions
  • 1k Points

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help

Footer

Softans

Softans is a social questions & Answers Engine which will help you establish your community and connect with other people.

About Us

  • Blog
  • Jobs
  • About Us
  • Meet The Team
  • Contact Us

Legal Stuff

Help

Follow

© 2021 Softans. All Rights Reserved
With Love by Softans.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.