Html navigation bar on top

CSS Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Inline List Items

Example

• display: inline; — By default,
• elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line

Floating List Items

Example

a display: block;
padding: 8px;
background-color: #dddddd;
>

• float: left; — Use float to get block elements to float next to each other
• display: block; — Allows us to specify padding (and height, width, margins, etc. if you want)
• padding: 8px; — Specify some padding between each element, to make them look good
• background-color: #dddddd; — Add a gray background-color to each element

Example

Horizontal Navigation Bar Examples

Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:

Example

ul <
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
>

li a display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Change the link color to #111 (black) on hover */
li a:hover background-color: #111;
>

Active/Current Navigation Link

Add an «active» class to the current link to let the user know which page he/she is on:

Example

Right-Align Links

Right-align links by floating the list items to the right ( float:right; ):

Example

Border Dividers

Example

/* Add a gray right border to all list items, except the last item (last-child) */
li border-right: 1px solid #bbb;
>

li:last-child border-right: none;
>

Fixed Navigation Bar

Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:

Fixed Top

Fixed Bottom

Note: Fixed position might not work properly on mobile devices.

Gray Horizontal Navbar

An example of a gray horizontal navigation bar with a thin gray border:

Example

ul <
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
>

Sticky Navbar

to create a sticky navbar.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport — then it «sticks» in place (like position:fixed).

Example

Note: Internet Explorer do not support sticky positioning. Safari requires a -webkit- prefix (see example above). You must also specify at least one of top , right , bottom or left for sticky positioning to work.

More Examples

Responsive Topnav

How to use CSS media queries to create a responsive top navigation.

Responsive Sidenav

How to use CSS media queries to create a responsive side navigation.

Dropdown Navbar

How to add a dropdown menu inside a navigation bar.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

How TO — Responsive Top Navigation

Learn how to create a responsive top navigation menu with CSS and JavaScript.

Responsive Navigation Bar

Resize the browser window to see how the responsive navigation menu works:

Create A Responsive Topnav

Step 1) Add HTML:

Example

The link with is used to open and close the topnav on small screens.

Step 2) Add CSS:

Example

/* Add a black background color to the top navigation */
.topnav background-color: #333;
overflow: hidden;
>

/* Style the links inside the navigation bar */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Change the color of links on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Add an active class to highlight the current page */
.topnav a.active background-color: #04AA6D;
color: white;
>

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon display: none;
>

Example

/* When the screen is less than 600 pixels wide, hide all links, except for the first one («Home»). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) .topnav a:not(:first-child)
.topnav a.icon float: right;
display: block;
>
>

/* The «responsive» class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) .topnav.responsive
.topnav.responsive a.icon position: absolute;
right: 0;
top: 0;
>
.topnav.responsive a float: none;
display: block;
text-align: left;
>
>

Step 3) Add JavaScript:

Example

/* Toggle between adding and removing the «responsive» class to topnav when the user clicks on the icon */
function myFunction() var x = document.getElementById(«myTopnav»);
if (x.className === «topnav») x.className += » responsive»;
> else x.className = «topnav»;
>
>

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

CSS Navigation Bar

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

and
elements makes perfect sense:

Example

Now let’s remove the bullets and the margins and padding from the list:

Example

• list-style-type: none; — Removes the bullets. A navigation bar does not need list markers
• Set margin: 0; and padding: 0; to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal navigation bars, which you will learn more about in the next chapters.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Responsive Top Navigation Menu Bar Using HTML & CSS

The navigation menu bar enhances the quality and beauty of the website by arranging all the content of each website in a beautiful way.

Hello friends, in this blog article I am going to show you how to create a menu bar on Responsive using only simple HTML and CSS programming code. I have designed many more types of menubars before, such as site menubars , overlay menubars, and so on. The navigation menu I created in this article is very simple and generally designed. HTML is used to build it and CSS code is used to design it.

The menubar is a significant UI design of the website . With the help of which you can organize all kinds of content of the website beautifully. Each menu has a hover effect, meaning that when you hover or click on the menus, the color of the background will change.

I have seen below how you can change this color as you wish. In the menubar on this navigator, I added some menus and used a logo. I also used social media icons. It is made fully responsive which means it can adapt itself beautifully to any device. Blue color has been used in the background.

How To Create a Responsive Top Navigation Menu

I hope you like this design. I will try to explain to you step by step and beautifully how I made this design. You can also find out which programming code has been used to extend an element. I showed the result after each step so that the beginners can understand.

I used HTML and CSS programming code to design this menu bar. Mostly CSS programming code has been used here. You can use the download button below to download the source code directly.

Источник

Responsive Top Navigation Menu Bar with HTML CSS

In this article, you will learn how Responsive Top Navigation Menu Bar is created using HTML and CSS. Earlier I designed many more types of menubars.

The beauty and quality of a website depend a lot on the navigation bar. All types of site content can be nicely stored in this navbar. As a result, the user will be able to find the information he needs very easily and quickly.

Responsive Top Navigation Menu Bar using HTML CSS

Every website uses a menu bar. However, some sites now use the sidebar menu. Earlier I showed you how to create a sidebar menu. I used HTML and CSS to create this design. @media of CSS has helped to make it fully responsive.

This is a very simple project. First I created this basic structure. Then I added a title. Then I added five menu items here. If you want to add a dropdown with these items. Then you can see another design made by me. We have made it responsive so that the design looks beautiful on all devices. Follow the step-by-step tutorial below to create this design.

Step 1: Basic structure of Navigation Menu

I have created the basic structure of this navigation using the HTML and CSS code below. Navbar height: 70px and background color blue. You can use any other color instead of this blue color.

Источник