JM Top Nav v1

Developer
Jonathan Garner
Size
2,828 Kb
Views
34,408
  1. JM Top Nav v1 Previews
  2. JM Top Nav v1 HTML Codes
  3. JM Top Nav v1 CSS Codes

How do I make an jm top nav v1?

What is a jm top nav v1? How do you make a jm top nav v1? This script and codes were developed by Jonathan Garner on 13 August 2022, Saturday.

JM Top Nav v1 Previews
IQ Test

JM Top Nav v1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>JM Top Nav v1</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Begin .header -->
<header class="header" role="banner"> <div class="logo"> <h1 class="header-item">Jasper Morrison</h1> </div> <div class="header-item all-button">All</div> <nav class="nav nav-group"> <ul class="top-nav"> <li class="top-nav__section header-item"><a class="top-nav__title" href="">Projects</a></li> <li class="top-nav__section header-item"><a class="top-nav__title" href="">Exhibitions</a></li> <li class="top-nav__section header-item"><a class="top-nav__title" href="">Publications</a></li> <li class="top-nav__section header-item"><a class="top-nav__title" href="">About Us</a></li> </ul> </nav><!--end .nav-->
</header>
<!-- End .header -->
</body>
</html>

JM Top Nav v1 - Script Codes CSS Codes

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit;
}
body { font-family: helvetica; font-weight: 100;
}
nav ul { list-style-type: none; padding: 0; margin: 0;
}
nav a { text-decoration: none; color: black;
}
nav a:hover { text-decoration: underline;
}
.header { padding: 0 1em; float: left; width: 100%; font-size: 0.9em; font-weight: 100; border-bottom: solid 1px #9d9282; /* Flexbox enhancement */ display: flex; flex-wrap: wrap; justify-content: space-between;
}
.header-item { margin: 1em 0;
}
.logo { font-size: 0.5em; color: #9d9282; float: left;
}
@media (min-width: 600px) { .logo { width: 20%; }
}
.all-button { float: right; border-left: solid 1px grey; padding-left: 1em; cursor: pointer; /* Flexbox enhancement */
}
@media (min-width: 600px) { .all-button { order: 1; }
}
@media (min-width: 870px) { .all-button:before { content: "Browse "; }
}
.nav-group { float: right; width: 100%; text-align: left;
}
@media (min-width: 600px) { .nav-group { width: 70%; }
}
.top-nav__section { display: none; float: left; width: 100%; text-align: left;
}
@media (min-width: 300px) { .top-nav__section { display: block; width: 25%; }
}
JM Top Nav v1 - Script Codes
JM Top Nav v1 - Script Codes
Home Page Home
Developer Jonathan Garner
Username jonathangarner
Uploaded August 13, 2022
Rating 3
Size 2,828 Kb
Views 34,408
Do you need developer help for JM Top Nav v1?

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!

Jonathan Garner (jonathangarner) Script Codes
Name
Incendiary
JM Nav 1st draft
JM Nav 2nd Gen prototype x2
Mr Peanut
After America
Search Form
JM Nav 2nd Gen prototype x3
Testing flexbox
Inside the Stalin Archives
JM Nav 2nd Gen prototype x
Create amazing captions 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!