Nav Menu with Chevron

Developer
Rob
Size
1,966 Kb
Views
50,600
  1. Nav Menu with Chevron Previews
  2. Nav Menu with Chevron HTML Codes
  3. Nav Menu with Chevron CSS Codes

How do I make an nav menu with chevron?

Using Fill Murray as placeholder icons, I created this nav menu with a chevron type style.. What is a nav menu with chevron? How do you make a nav menu with chevron? This script and codes were developed by Rob on 30 August 2022, Tuesday.

Nav Menu with Chevron Previews
IQ Test

Nav Menu with Chevron - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav Menu with Chevron</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="flag-nav"> <ul class="inner-nav"> <li><a href="">Home</a></li> <li><a href="">About Us</a></li> <li><a href="">Products</a></li> <li><a href="">Competitive Basket Weaving</a></li> <li><a href="">Career Opportunities</a></li> <li><a href="">Contact</a></li> </ul>
</nav>
</body>
</html>

Nav Menu with Chevron - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Marmelad);
body { background-color: #ffebce;
}
.flag-nav { display: inline-block; margin: 0; padding: 0; width: 250px; background-color: #ffae57;
}
ul.inner-nav { list-style-type: none; overflow: hidden; margin: 0 0 0 0; padding: 0;
}
.inner-nav li a { position: relative; text-decoration: none; display: block; overflow: hidden; width: 238px; padding: 0 0 0 32px; height: 40px; line-height: 40px; color: #225263; font-size: .9em; font-family: 'Marmelad', sans-serif; background-image: url('http://www.fillmurray.com/20/20'); background-repeat: no-repeat; background-position: 7px;
}
.inner-nav li a:hover { color: #151515; background-image: url('http://www.fillmurray.com/30/20'); background-repeat: no-repeat; background-position: 7px; padding: 0 0 0 42px; background-color: #fad55c; box-shadow: inset 1px 1px 3px #da953c;
}
.inner-nav:after { content:""; border: 40px solid transparent; border-top-color: #ffae57; border-left: 125px solid transparent; border-right: 125px solid transparent; height: 0; width: 0; position: absolute;
}
.inner-nav li:last-child a:hover,
.inner-nav li:last-child a {
}
.inner-nav li:first-child a:hover,
.inner-nav li:first-child a {
}
Nav Menu with Chevron - Script Codes
Nav Menu with Chevron - Script Codes
Home Page Home
Developer Rob
Username rowinf
Uploaded August 30, 2022
Rating 3
Size 1,966 Kb
Views 50,600
Do you need developer help for Nav Menu with Chevron?

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!

Rob (rowinf) Script Codes
Name
JQuery Animations
Table filters
Get combo box item value
Filter inputs
Bootstrap test
Html5 form validation
Flash Cards
Jquery form
A Pen by Rob
Site Layout
Create amazing video scripts 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!