xxxxxxxxxx
.navbar {
background-color: #f8f8f8;
padding: 10px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
margin-right: 10px;
}
.navbar a {
text-decoration: none;
color: #333;
padding: 5px;
}
.navbar a:hover {
background-color: #333;
color: #fff;
}
xxxxxxxxxx
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #2d3436;
}
nav {
margin-top: 200px;
text-align: center;
}
nav ul {
display: inline-block;
list-style: none;
transform: skew(-25deg);
}
nav ul li {
background-color: #fff;
float: left;
border-right: 1px solid #eee;
box-shadow: 1.95px 1.95px 2.6px rgba(0, 0, 0, 1);
text-transform: uppercase;
color: #555;
font-weight: 400;
transition: all 0.2s linear;
}
nav ul li:hover {
background-color: #0984e3;
color: #fff;
}
a {
color: inherit;
display: block;
padding: 10px 20px;
text-decoration: none;
transform: skew(25deg);
}
/* top-left top-right bottom-right bottom-left */
nav ul li:first-child {
border-radius: 7px 0 0 7px;
}
nav ul li:last-child {
border-radius: 0 7px 7px 0;
}
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS for navbar */
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
<!-- Rest of the page content -->
</body>
</html>
xxxxxxxxxx
<!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 rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo">MUO</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li class="services">
<a href="/">Services</a>
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li><a href="/">Dropdown 1 </a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 2</a></li>
<li><a href="/">Dropdown 3</a></li>
<li><a href="/">Dropdown 4</a></li>
</ul>
</li>
<li><a href="/">Pricing</a></li>
<li><a href="/">Contact</a></li>
</div>
</ul>
</nav>
</body>
</html>
xxxxxxxxxx
header img {
height: 80px;
margin-left: 40px;
}
body {
height: 125vh;
background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
background-size: cover;
font-family: sans-serif;
margin-top: 80px;
padding: 30px;
}
main {
color: white;
}
header {
background-color: white;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
align-items: center;
box-shadow: 0 0 25px 0 black;
}
header * {
display: inline;
}
header li {
margin: 20px;
}
header li a {
color: black;
text-decoration: none;
}