Horizontal navigation

Developer
Sander
Size
2,183 Kb
Views
8,096
  1. Horizontal navigation Previews
  2. Horizontal navigation HTML Codes
  3. Horizontal navigation CSS Codes

How do I make an horizontal navigation?

A horizontal navigaion with all items aligned next to eachother with a equal whitespace.. What is a horizontal navigation? How do you make a horizontal navigation? This script and codes were developed by Sander on 18 December 2022, Sunday.

Horizontal navigation Previews
IQ Test

Horizontal navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper boxShadow roundedCorners"> <div class="top roundedCornersTop"> </div> <ul class="navigation"> <li> <a href="" title="home">Home</a> </li> <li> <a href="" title="About us">About us</a> </li> <li> <a href="" title="Portfolio">Portfolio</a> </li> <li> <a href="" title="Contact">Contact</a> </li> <li class="break"></li> </ul> <div class="content"> <h1 class="pageTitle">Horizontal navigation</h1> <h2 class="pageSubTitle">Created only with CSS</h2> <p>A horizontal navigaion with all items aligned next to eachother with a equal whitespace.</p> <p>Developed for the modern browsers</p> </div>
</div>
</body>
</html>

Horizontal navigation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
body { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300; line-height: 0.8em; color: #222; background: #e4e4e4;
}
p { margin: 0 0 20px 0;s
}
.boxShadow { -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.roundedCorners { border-radius: 10px;
}
.roundedCornersTop { border-radius: 10px 10px 0 0;
}
.pageTitle { margin: 20px 0 0 0; font-size: 2em; font-weight: 700; line-height: 0.5em; color: #0C5E3B;
}
.pageSubTitle { margin: 0 0 20px 0; font-size: 1.4em; font-weight: 700; line-height: 2.2em; color: #454545;
}
.wrapper{ width: 80%; margin: 20px auto; background: #fff;
}
.top { min-height: 50px; padding: 20px; background: #249162;
}
.navigation { height: 40px; padding: 0 100px; font-weight: 500; line-height: 40px; text-transform: uppercase; text-align: justify; background: #222;
}
.navigation li{ display: inline-block;
}
.navigation a { text-decoration: none; color: #fff;
}
.navigation a:hover { color: #D36235;
}
.navigation .break{ width: 100%; height: 0;
}
.content { padding: 20px;
}
Horizontal navigation - Script Codes
Horizontal navigation - Script Codes
Home Page Home
Developer Sander
Username skeurentjes
Uploaded December 18, 2022
Rating 3
Size 2,183 Kb
Views 8,096
Do you need developer help for Horizontal navigation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sander (skeurentjes) Script Codes
Name
Sidenavigation
Side navigation
Card flip
Spinning loader
Accordion
Custom input radio buttons
Flexbox layout
Dropdown navigation
Search field
Automatic scroll
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!