Css navbar with search

Css navbar with search

• Create a Sticky Social Media Bar using HTML and CSS
• Create a Search Bar using HTML and CSS
• How to create Right Aligned Menu Links using HTML and CSS ?
• How to add a Login Form to an Image using HTML and CSS ?
• How to Create a Tab Image Gallery ?
• How to create a Hero Image using HTML and CSS ?
• How to design Meet the Team Page using HTML and CSS ?
• How to Create an Image Overlay Icon using HTML and CSS ?
• How to Create Browsers Window using HTML and CSS ?
• How to Create Breadcrumbs using HTML and CSS ?
• How to Create Section Counter using HTML and CSS ?
• How to Create Toggle Switch by using HTML and CSS ?
• How to Create a Cutout Text using HTML and CSS ?
• How to make a Pagination using HTML and CSS ?

HTML Basics

• HTML Tutorial
• HTML Introduction
• HTML full form
• HTML Editors
• HTML Comments
• HTML Basics
• HTML Layout
• HTML Elements
• HTML Heading
• HTML Paragraphs
• HTML Text Formatting
• HTML Quotations
• HTML Color Styles and HSL
• HTML Links
• HTML Images
• HTML Tables
• HTML Lists
• HTML Block and Inline Elements
• HTML Iframes
• HTML File Paths
• HTML Viewport meta tag for Responsive Web Design
• HTML Computer Code Elements
• HTML Entities
• HTML Charsets
• HTML | URL Encoding
• HTML | Deprecated Tags

HTML Tags

HTML Attributes

• HTML Attributes
• HTML | accept Attribute
• HTML accept-charset Attribute
• HTML accesskey Attribute
• HTML| action Attribute
• HTML align Attribute
• HTML alt attribute
• HTML | async Attribute
• HTML input autocomplete Attribute
• HTML autocomplete Attribute
• HTML autofocus Attribute
• HTML input autofocus Attribute
• HTML autofocus Attribute
• HTML autofocus Attribute
• HTML Attributes Complete Reference

HTML Graphics

HTML APIs

HTML DOM

• DOM (Document Object Model)
• HTML DOM activeElement Property
• HTML DOM anchors Collection
• HTML DOM close() Method
• HTML DOM baseURI Property
• HTML DOM body Property
• HTML DOM createAttribute() Method
• HTML DOM doctype Property
• HTML DOM writeln() Method
• HTML DOM console error() Method
• HTML DOM URL Property
• HTML DOM embeds Collection
• HTML DOM console warn() Method
• HTML DOM console trace() Method
• HTML DOM Complete Reference

HTML Audio/Video

• HTML DOM Audio Object
• HTML DOM Video Object
• HTML DOM Video canPlayType( ) Method
• HTML DOM Audio audioTracks Property
• HTML DOM Audio autoplay Property
• HTML DOM Audio buffered Property
• HTML DOM Audio controls Property
• HTML DOM Audio currentSrc Property
• HTML DOM Audio currentTime Property
• HTML DOM Audio defaultMuted Property
• HTML DOM Audio defaultPlaybackRate Property
• HTML DOM Audio duration Property
• HTML DOM Audio ended Property
• HTML DOM Audio loop Property
• HTML DOM Audio/Video Complete Reference

HTML 5

HTML 5 MathML

HTML Course

• Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
• HTML Course | Structure of an HTML Document
• HTML Course First Web Page Printing Hello World
• HTML Course Basics of HTML
• HTML Course : Starting the Project – Creating Directories
• HTML Course Understanding and Building Project Structure
• HTML Course : Creating Navigation Menu
• HTML Course : Building Header of the Website
• HTML Course : Building Main Content – Section 1
• HTML Course | Building Main Content – Section 2
• HTML course | Building Main Content – Section 3
• HTML Course | Building Footer
• HTML Course | Practice Quiz 1
• HTML Course | Practice Quiz 2

• Create a Sticky Social Media Bar using HTML and CSS
• Create a Search Bar using HTML and CSS
• How to create Right Aligned Menu Links using HTML and CSS ?
• How to add a Login Form to an Image using HTML and CSS ?
• How to Create a Tab Image Gallery ?
• How to create a Hero Image using HTML and CSS ?
• How to design Meet the Team Page using HTML and CSS ?
• How to Create an Image Overlay Icon using HTML and CSS ?
• How to Create Browsers Window using HTML and CSS ?
• How to Create Breadcrumbs using HTML and CSS ?
• How to Create Section Counter using HTML and CSS ?
• How to Create Toggle Switch by using HTML and CSS ?
• How to Create a Cutout Text using HTML and CSS ?
• How to make a Pagination using HTML and CSS ?

Источник

Responsive Navbar with Search Box using CSS

You may have seen many websites that has a search box inside the navbar. Off course! it provides the best user experience while browsing and searching site content. If you are a beginner in web designing you may have tried to build such a navbar. Didn’t get the best result? don’t worry! In this tutorial, you’ll come to know the basic concept to create a responsive navbar with a search box.

Basically, this is a pure CSS based navbar project that comes with a search box, dropdown, and hamburger image icon. The menu items are handled in HTML unordered lists and dropdown are based on nested lists.

HTML for Search Box Responsive Navbar

In HTML, create a wrapper with the class name «content-wrapper» and place a search form in the beginning. After that, place base 64 data of hamburger iconic image and wrap it inside the span element. Then, create the anchor links and arrange them inside the HTML unordered lists. The complete HTML structure for the navbar is as follows:

The CSS Styles

First, you need to define styles for the navmenu selector in CSS coding. Keep its full width, define a background color, and display it as inline-block. Similarly, define the styles for hamburger (image) icon ( #menu id) that will be displayed on mobile. You need to set a relative position for this, the values for color, padding, and font-size define as follows:

After that, target the navbar anchor links and define their styles as described below. Here, the important thing is that you need to hide the nav links that we’ll toggle on mobile.

#menu a < text-decoration: none >nav < display: none >nav ul < list-style-type: none; padding-left: 0; font-size: 0; background-color: #303030 >nav li < display: block; font-size: 16px; color: white; margin: 0 5px; >ul.navbar>li>a < color: #fff >nav a

Likewise, create CSS styles for submenu items in order to add dropdown support based on the nested list items. Keep the child list hidden (using CSS display none) and reveal it when the parent element hovered. The other values like color, font-size, etc can be set as you require.

.sub-menu li < list-style-type: none; display: inline-block >ul.navbar li ul.sub-menu < display: none; position: absolute >ul.navbar li < position: relative; >ul.navbar li:hover ul.sub-menu < display: block >.sub-menu li < margin-left: 0!important >ul.sub-menu>li>a < color: #fff; >ul.navbar>li>a:hover, ul.sub-menu>li>a:hover

Now, specify the styles for search form and input. Float the search form to the right and display it as inline-block. Likewise, float the search text input to the left and define its width as 200px. If you want to customize this search form check out this search box with an icon inside.

#search-form < display: inline-block; padding-top: 4px; padding-right: 5px; float: right >#search-form input

Create CSS styles for the search form submit button. You need to float it to the right and the width should be auto. You can set custom values for background color, font-size, and border-radius, etc. If you want to style it differently, browse a cool pack of CSS stylish buttons.

Finally, use the CSS media queries to make the navbar responsive. You can also add or hide some elements on the mobile navbar.

@media only screen and (max-width:720px) < nav ul < width: 100%!important >#sub-menu < display: none >nav a < padding: 5px 10px >.navmenu < padding: 5px; >#navbar < display: none; height: 24px; line-height: 24px; >.toggle-nav < padding: 6px 10px >#search-form input < width: 150px; padding: 5px; margin: 0; >> @media only screen and (min-width:720px) < #menu < display: none >#navbar < height: 50px; line-height: 50px; >nav < display: block!important >nav li < display: inline-block >#search-form input < height: 50px; padding: 10px; margin: 5px 0; >>

That’s all! I hope you found this tutorial helpful to create a responsive navbar with a search box. If you have any questions or suggestions related to this menu, feel free to comment below.

Muhammad Asif

Muhammad Asif is a Front End Developer and Editor Staff at Codeconvey.com. He enjoys experimenting with new CSS features and helping others learn about them.

Источник

Responsive Navbar with Search Box using HTML CSS & JavaScript

Hello readers, Today in this blog, you’ll learn how to create a Fully Responsive Navbar with Search using HTML CSS & JavaScript. Earlier I have shared many blogs about Responsive Navigation Bar and Responsive Sidebar Menu but still, I have not shared any blog on Responsive Navbar with Search Box. So now, it’s time to create a Responsive Navbar with a Search Box.

A navigation bar is a user interface element within a webpage that contains links to other parts of the website. A website navigation bar is most usually displayed as a horizontal list of links at the top of each page.

Today in this blog, I’ll share with you this program (Responsive Navbar with Search Box). This navbar is fully responsive to any device. On mobile devices, this navbar will adjust its height-width automatically according to the device’s height-width. I used CSS Flex and @media property to make this Navbar Fully Responsive. The search box of this navbar is to create only for design purposes so, when you entered any info in the search bar and click on the search button, it won’t show you any results.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Responsive Navbar with Search Box).

Video Tutorial of Responsive Navbar with Search Box

As you have seen in the video, this Navbar is fully Responsive for any device. If you’re a beginner in Web Designing then this tutorial helped you to understood the basic codes and concepts behind creating the Responsive Navbar and their Search Box.

If you like this program (Responsive Navbar with Search Box) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and websites. If you know JavaScript perfectly then you can easily make this search box workable by adding some JavaScript codes.

You might like this:

Responsive Navbar with Search Box [Source Codes]

To create this program (Responsive Navbar with Search Box). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap’); * < margin: 0; padding: 0; outline: none; box-sizing: border-box; font-family: 'Montserrat', sans-serif; >body < background: #f2f2f2; >nav < background: #171c24; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; height: 70px; padding: 0 100px; >nav .logo < color: #fff; font-size: 30px; font-weight: 600; letter-spacing: -1px; >nav .nav-items < display: flex; flex: 1; padding: 0 0 0 40px; >nav .nav-items li < list-style: none; padding: 0 15px; >nav .nav-items li a < color: #fff; font-size: 18px; font-weight: 500; text-decoration: none; >nav .nav-items li a:hover < color: #ff3d00; >nav form < display: flex; height: 40px; padding: 2px; background: #1e232b; min-width: 18%!important; border-radius: 2px; border: 1px solid rgba(155,155,155,0.2); >nav form .search-data < width: 100%; height: 100%; padding: 0 10px; color: #fff; font-size: 17px; border: none; font-weight: 500; background: none; >nav form button < padding: 0 15px; color: #fff; font-size: 17px; background: #ff3d00; border: none; border-radius: 2px; cursor: pointer; >nav form button:hover < background: #e63600; >nav .menu-icon, nav .cancel-icon, nav .search-icon < width: 40px; text-align: center; margin: 0 50px; font-size: 18px; color: #fff; cursor: pointer; display: none; >nav .menu-icon span, nav .cancel-icon, nav .search-icon < display: none; >@media (max-width: 1245px) < nav< padding: 0 50px; >> @media (max-width: 1140px) < nav< padding: 0px; >nav .logo < flex: 2; text-align: center; >nav .nav-items < position: fixed; z-index: 99; top: 70px; width: 100%; left: -100%; height: 100%; padding: 10px 50px 0 50px; text-align: center; background: #14181f; display: inline-block; transition: left 0.3s ease; >nav .nav-items.active < left: 0px; >nav .nav-items li < line-height: 40px; margin: 30px 0; >nav .nav-items li a < font-size: 20px; >nav form < position: absolute; top: 80px; right: 50px; opacity: 0; pointer-events: none; transition: top 0.3s ease, opacity 0.1s ease; >nav form.active < top: 95px; opacity: 1; pointer-events: auto; >nav form:before < position: absolute; content: ""; top: -13px; right: 0px; width: 0; height: 0; z-index: -1; border: 10px solid transparent; border-bottom-color: #1e232b; margin: -20px 0 0; >nav form:after < position: absolute; content: ''; height: 60px; padding: 2px; background: #1e232b; border-radius: 2px; min-width: calc(100% + 20px); z-index: -2; left: 50%; top: 50%; transform: translate(-50%, -50%); >nav .menu-icon < display: block; >nav .search-icon, nav .menu-icon span < display: block; >nav .menu-icon span.hide, nav .search-icon.hide < display: none; >nav .cancel-icon.show < display: block; >> .content < position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); >.content header < font-size: 30px; font-weight: 700; >.content .text < font-size: 30px; font-weight: 700; >.space < margin: 10px 0; >nav .logo.space < color: red; padding: 0 5px 0 0; >@media (max-width: 980px) < nav .menu-icon, nav .cancel-icon, nav .search-icon< margin: 0 20px; >nav form < right: 30px; >> @media (max-width: 350px) < nav .menu-icon, nav .cancel-icon, nav .search-icon< margin: 0 10px; font-size: 16px; >> .content < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); >.content header < font-size: 30px; font-weight: 700; >.content .text < font-size: 30px; font-weight: 700; >.content .space

That’s all, now you’ve successfully created a Responsive Navbar with Search Box using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Источник