Adding a navigation menu on a web page is not a difficult task. With that, we can easily add a navigation menu on an image. Let us first set the margin and padding for the HTML document’s body. Set the Style for the Document’s Body The margin and padding are set for the element using the margin and padding property respectively − body { margin:0px; margin-top:10px; padding: 0px; } The Position of the Menu The menu is placed after some margin on the top of the web page. This vertical top position is set using the margin-top property − margin-top:10px; Set ... Read More

To create a fixed menu on a web page, use the position property and set the value fixed. Set the width to 100% using the width property. Set the Navigation Menu Use the element to create the navigation menu on a web page. The links are set using the and the href attribute − Home Login Register Contact Us More Info Style the Navigation Menu We have positioned the menu as fixed using the position property with the value ... Read More

Following is the code to create a navigation bar with equal-width navigation links.−Example Live Demo Document body{    margin:0px;    margin-top:60px;    padding: 0px; } *,*::before,*::after{    box-sizing: border-box; } nav{    position: fixed;    top: 0;    width: 100%;    background-color: rgb(39, 39, 39);    overflow: auto;    height: auto; } .links {    width: 20vw;    padding: 17px;    display: inline-block;    text-align: center;    color: rgb(178, 137, 253);    text-decoration: none;    font-size: 17px; } .links:hover {    background-color: rgb(100, 100, 100); } .selected{    background-color: rgb(0, 18, 43); } Home Login Register Contact Us More Info Equal width navigation menu OutputThe above code will produce the following output −

Following is the code to produce a navigation bar with a centered link/logo −Example Live Demo Document body{    margin:0px;    margin-top:60px;    padding: 0px; } nav{    position: fixed;    top:0;    width: 100%;    background-color: rgb(251, 255, 196);    overflow: auto;    height: auto; } .left-links{    display: inline-block;    position: absolute;    left: 0; } .right-links{    display: inline-block;    position: absolute;    right: 0; } .center-links{    display: inline-block;    margin-left: 50%; } .links {    display: inline-block;    text-align: center;    padding: 14px;    color: rgb(0, 0, 0);    text-decoration: none;    font-size: 17px;    font-weight: bolder; } .links:hover {    border-bottom: 2px solid purple; } .selected{    border-bottom: 2px solid purple; } Login Register Home Contact Us More Info Hover on the above links OutputThe above code will produce the following output−

With CSS, we can easily create a navigation bar i.e., a menu. Also, links can be left or right-aligned. We will use flex to achieve the same. Let us see how. Create a Navigation bar Using The element is used to create a navigation bar on the web page. The links are set in between − Navigation bar With Flex and Position Fixed The display is set to flex.The position is set fixed using the fixed value of the position property − nav { display: flex; position: fixed; top:0; width: 100%; ... Read More

To create underlined navigation links, use the border-bottom property in CSS. The border-bottom is a shorthand for the width, style, and color of the bottom border. These links will be displayed underlined on hover as well using the :hover selector. With that, the selected link will also get underlined. Let us see how to create bottom bordered i.e., underlined navigation links on a web page with HTML and CSS. Create the navigation links Use the element to create the navigation links on a web page − Home Login ... Read More

To create a bottom navigation menu, set the nav element with the bottom and position properties. The position property is set to fixed and the bottom is set to 0px. The bottom navigation menu looks like the following on a web page. The menu is placed is fixed in the bottom as shown below − Create a Navigation Menu First, set the navigation menu with some menus − Home Login Register Contact Us More Info Style ... Read More

Vertical menus on a web page are mainly placed on the left or the right. These left or right menus are vertically aligned to make it easier for users to navigate or click them. To create a vertical menu, set a container and within that set the menu links. The display property is to be set as block to let the menu appear vertically. Let us see how to create a vertical menu with HTML and CSS. Set a container for the menu A div is set for the menu. The menu links are added using the element with ... Read More

Following is the code to produce a horizontal scrollable menu with CSS −Example Live Demo Document body{    margin:0px;    margin-top:10px;    padding: 0px; } nav{    width: 100%;    background-color: rgb(39, 39, 39);    overflow: auto;    height: auto;    white-space: nowrap; } .links {    display: inline-block;    text-align: center;    padding: 14px;    color: rgb(178, 137, 253);    text-decoration: none;    font-size: 17px; } .links:hover {    background-color: rgb(100, 100, 100); } .selected{    background-color: rgb(0, 18, 43); } Home Login Register Contact Us More Info Our Social Links Visit Us OutputThe above code will produce the following output −On resizing the browser window horizontal scrolling will be seen −

Following is the code to create hoverable side navigation buttons with CSS.Example Live Demo Document nav a {    position: fixed;    left: -120px;    transition: 0.3s;    padding: 10px;    width: 140px;    text-decoration: none;    font-size: 20px;    color: black;    font-weight: bolder;    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav a:hover {    left: 0; } #Info{    top: 20px;    background-color: #6de2f7; } #Social{    top: 80px;    background-color: #71fc71; } #Address {    top: 140px;    background-color: #c4f553; } #Home {    top: 200px;    background-color: rgb(225, 115, 240); ... Read More