Subtle site navigation with description

Developer
Nick Nikolov
Size
3,206 Kb
Views
22,264
  1. Subtle site navigation with description Previews
  2. Subtle site navigation with description HTML Codes
  3. Subtle site navigation with description CSS Codes

How do I make an subtle site navigation with description?

Simple navigation with a slide up effect showing a short description.. What is a subtle site navigation with description? How do you make a subtle site navigation with description? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.

Subtle site navigation with description Previews
IQ Test

Subtle site navigation with description - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subtle site navigation with description</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { margin: 0; padding: 0;
}
body,
html { font-family: "Roboto Condensed"; font-size: 16px;
}
header { text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; padding: 0 20px; background: #f3f3f3; height: 50px; overflow: hidden; border-bottom: 1px solid #eee;
}
header .brand { font-size: 24px; line-height: 30px; padding: 10px 0; display: inline-block; font-weight: 300;
}
header .nav { font-size: 18px; display: inline-table; vertical-align: top; line-height: 16px; margin-left: 20px;
}
header .nav li { text-transform: capitalize; vertical-align: top; text-align: center; display: table-cell;
}
header .nav li a { border-top: 4px solid transparent; transition: all 0.2s ease-in-out; display: block; padding: 13px 20px 0px 20px; text-decoration: none; font-weight: 300; color: #333;
}
header .nav li small { opacity: 0; padding-top: 5px; font-size: 70%; display: block; transition: all 0.2s ease-in-out; color: #777;
}
header .nav li:hover a { border-top: 4px solid #CF3729; color: #CF3729; padding-top: 7px;
}
header .nav li:hover small { padding-top: 0px; opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header>	<h3 class="brand">	Brand Logo	</h3>	<ul class="nav">	<li>	<a href="#">	Home	<small>Sweet home</small>	</a>	</li>	<li>	<a href="#">	Services	<small>And more</small>	</a>	</li>	<li>	<a href="#">	About us	<small>Our mission</small>	</a>	</li>	<li>	<a href="#">	Contact	<small>Give us a call</small>	</a>	</li>	</ul>
</header>
</body>
</html>

Subtle site navigation with description - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body,
html { font-family: "Roboto Condensed"; font-size: 16px;
}
header { text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; padding: 0 20px; background: #f3f3f3; height: 50px; overflow: hidden; border-bottom: 1px solid #eee;
}
header .brand { font-size: 24px; line-height: 30px; padding: 10px 0; display: inline-block; font-weight: 300;
}
header .nav { font-size: 18px; display: inline-table; vertical-align: top; line-height: 16px; margin-left: 20px;
}
header .nav li { text-transform: capitalize; vertical-align: top; text-align: center; display: table-cell;
}
header .nav li a { border-top: 4px solid transparent; transition: all 0.2s ease-in-out; display: block; padding: 13px 20px 0px 20px; text-decoration: none; font-weight: 300; color: #333;
}
header .nav li small { opacity: 0; padding-top: 5px; font-size: 70%; display: block; transition: all 0.2s ease-in-out; color: #777;
}
header .nav li:hover a { border-top: 4px solid #CF3729; color: #CF3729; padding-top: 7px;
}
header .nav li:hover small { padding-top: 0px; opacity: 1;
}
Subtle site navigation with description - Script Codes
Subtle site navigation with description - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded October 17, 2022
Rating 3
Size 3,206 Kb
Views 22,264
Do you need developer help for Subtle site navigation with description?

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!

Nick Nikolov (necks) Script Codes
Name
SVG Clock
Ripple
Single element speech bubble
Heart Rating
Range bar with indicator
Player Flip Cards
60fps animated SVG waves hero
Progress bars with colour change.
Simple grid layout
Table cell corner indicator
Create amazing SEO content 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!