Hey friends,today in this blog post you'll learn how to create an
RGB Navigation Menu Bar with different color illustrations Effect in HTML &
CSS. This will help to understand the basic concepts regarding the ways to play
with responsive UI design as well creating a navigation box with all the icons
which were taken from a website named IONICON which provides free icons facilities to
its users and have access to different varieties of icons fonts.
This webpage is fully responsive with all sorts of available resources that you may require
and can access the codes for free without any copyright related issues.
RGB Navigation Menu Bar : It is a navigation menu bar which is filled with RGB-Red Green Blue
colors combination .The source code written below will demonstrate the following topic perfectly.
If you want to make a Responsive RGB Design then this webpage will help you understand how RGB lights work on
a menu box. If you are known to basic HTML and CSS then you can easily create this Responsive RGB nav menu design using
HTML CSS. Copy the source code given below and try to understand the logics behind it
and also navigate it to your required width,height or assemble it and figure out .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<title>RGB Navigation Menu - CSS Styles</title>
</head>
<body>
<div class="background-container"></div>
<div class="container">
<ul>
<li class="list">
<a href="https://bggamerzofficial.netlify.app/">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<a href="https://bggamerzofficial.netlify.app/aboutus/aboutus.html">
<span class="icon">
<ion-icon name="person-outline">lt;/ion-icon>
</span>
<span class="text">About Us </span>
</a>
</li>
<li class="list"> <a href="https://bggamerzofficial.netlify.app/policy/terms.html">
<span class="icon">
<ion-icon name="pulse-outline"> </ion-icon>
</span>
<span class="text">Feedback </span>
</a>
</li>
<li class="list"> <a href="https://bggamerzofficial.netlify.app/">
<span class="icon">
<ion-icon name="mail-outline"> </ion-icon>
</span>
<span class="text">Contact Us </span>
</a>
</li>
</ul>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"> </script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"> </script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
img {
width: 100%;
height: 100%;
position: fixed;
}
.container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(rgb(5, 5, 5), black);
height: 15vh;
border: 2px solid white;
border-radius: 35px;
width:50vw;
}
.background-container {
position: absolute;
left: 50%;
top: 50%;
width: 51.5vw;
background: linear-gradient(#04fde4, #ffe606, #fc06df);
height: 18vh;
border-radius: 35px;
font-weight: bolder;
transform: translate(-50%, -50%);
}
.background-container {
animation: rotate 1s linear infinite;
}
.container {
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
.container ul {
display: flex;
list-style: none;
}
.container ul li {
margin: auto 2rem;
}
.container ul li a {
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
text-decoration: none;
}
.container ul li a span:hover {
color:aqua;
}
@media screen and (max-width:1230px) {
.container {
width:60vw;
}
.background-container {
width: 60vw;
}
}
@media screen and (max-width:1020px) {
.container {
width:70vw;
}
.background-container {
width: 70vw;
}
}
@media screen and (max-width:880px) {
.container {
width:95vw;
}
.background-container {
width: 95vw;
}
}
@media screen and (max-width:650px) {
.container {
width:80vw;
}
.background-container {
width: 80vw;
}
.container ul li a .text{
font-size:1rem;
}
.container ul li {
margin: auto 0.6rem;
}
}
@media screen and (max-width:400px) {
.container {
width:90vw;
height:14vh;
}
.background-container {
width: 90vw;
height:15vh;
}
.container ul li a .text{
font-size:1rem;
}
.container ul li {
margin: auto 0.6rem;
}
}
Hello there,We will be providing with varieties of categories related to websites optimization tools as well various
gaming as well as information related stuffs in about no time.Connect with us to know more
about website UI designing and become a part of BG GaMeRz Official YouTube + Website.
And, Once you have copied the above html,css source codes.You can apply it to your own
IDE and run it smoothly without any errors.If you encounter any errors ,please make
sure to comment down in our official youtube channel .ThankYou!