Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a navigation menu on an image with CSS?
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 <body> 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 a div for the Navigation Menu
Place the <nav> in the <div>. The <nav> will define a set of navigation links using the <a> element. The links are placed in the href attribute −
<div class="image-nav">
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</div>
Place the Background Image With the Background Property
The background:url sets the background image on a web page. The background-size is used to set the size of the background image. The cover value suggests resizing the background image to cover the entire container. The image is placed in the center using the background-positon property −
.image-nav{
background:url('https://www.tutorialspoint.com/market/public/assets/images/business-top-banner.svg');
min-height: 400px;
padding: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 70%;
}
Place the Navigation Menu on the Image
The overflow property is set to auto and the height property is set to auto. The <nav> element will now automatically adjust its height to allow its content to be presented correctly −
nav{
width: 80%;
background-color: rgb(23, 104, 43);
overflow: auto;
height: auto;
}
Place the Menu Links
Set the display property to the value inline-block. The display suggests how to control the layout of an element. In this case, the inline-block of the display property displays an element as an inline-level block container −
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 17px;
}
Above, to remove the underline from the links, the text-decoration is set to none.
Example
The following is the code to add a navigation menu on an image using CSS −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body{
margin:0px;
margin-top:10px;
padding: 0px;
}
nav{
width: 80%;
background-color: rgb(23, 104, 43);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(129, 123, 123);
}
.selected{
background-color: rgb(0, 56, 42);
}
.image-nav{
background:url('https://www.tutorialspoint.com/market/public/assets/images/business-top-banner.svg');
min-height: 400px;
padding: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 70%;
}
</style>
</head>
<body>
<div class="image-nav">
<nav>
<a class="links selected" href="#">Home</a>
<a class="links" href="#">Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</div>
</body>
</html>
896 Views
