Boatladders.com topbar
How do I make an boatladders.com topbar?
A secondary navigation bar to link to sister sites.. What is a boatladders.com topbar? How do you make a boatladders.com topbar? This script and codes were developed by Travis Wagner on 11 September 2022, Sunday.
Boatladders.com topbar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>boatladders.com topbar</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="topbar"> <ul> <li>Our family of websites:<br>for all your boating needs </li> <li class="overlay"><a class="pontoonStuff" href="#"></a></li> <li class="overlay"><a class="bassBoatSeats" href="#"></a></li> <li><a class="overlay boatSeatStore" href="#"></a></li> <li class="overlay"><a class="boatCarpetBuys" href="#"></a></li> <li><a class="boatLadders"href="#"></a></li> </ul>
</div>
</body>
</html>
Boatladders.com topbar - Script Codes CSS Codes
.topbar { position: relative; width: 100%; top: 0; left: 0; height: 41px; background-color: #3B6CBB ;
}
.topbar ul { width: 763px; position: relative; margin-left: auto; margin-right: auto;
}
.topbar li { display: inline-block;
}
.topbar li:first-child { position: relative; top: -10px; line-height: 12px; font-family: sans-serif; color: #fff; font-weight: lighter; text-align: right; font-size: 12px;
}
.topbar li a { height: 41px; width: 120px; display: inline-block; border-radius: 0; border-left: 1px solid white;
}
.topbar li a.pontoonStuff { background: url("http://www.boatladders.com/Assets/Custom_Images/ps_topbanner.png") no-repeat;
}
.topbar li a.bassBoatSeats { background: url("http://www.boatladders.com/Assets/Custom_Images/bbs_topbanner.png");
}
.topbar li a.boatSeatStore { background: url("http://www.boatladders.com/Assets/Custom_Images/bss_topbanner.png");
}
.topbar li a.boatCarpetBuys { background: url("http://www.boatladders.com/Assets/Custom_Images/bcb_topbanner.png");
}
.topbar li a.boatLadders { background: url("http://www.boatladders.com/Assets/Custom_Images/boatladders_topbanner_active.png");
}
.topbar li:last-child a { border-right: 1px solid white;
}
/*Start Overlay*/
.overlay { position:relative; width:118px; height:41px; margin-right: -3px;
}
.overlay a { width:100%;
}
.overlay:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.3); opacity:0; transition: all 0.4s; -webkit-transition: all 0.4s;
}
.overlay:hover:after { opacity:1;
}
Developer | Travis Wagner |
Username | trvswgnr |
Uploaded | September 11, 2022 |
Rating | 3 |
Size | 2,117 Kb |
Views | 28,336 |
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!
Name | Size |
Dice Game JS | 1,633 Kb |
CB911 Get Event Info and Reformat | 7,311 Kb |
Satisfying FlexBox Holy Grail Layout | 2,761 Kb |
Email Template Outlook | 2,552 Kb |
Social Sharing Buttons | 2,668 Kb |
FlexBox Masonry | 1,648 Kb |
FlexBox Holy Grail | 2,713 Kb |
Jhilex App Responsive | 4,963 Kb |
Behance Portfolio | 4,857 Kb |
Framework7 Change Style with Device | 5,493 Kb |
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!
Name | Username | Size |
Pericles mi loro... | Judag | 4,125 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Getting Started | Viblast | 1,500 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 Kb |
Css3 loader | Clknap | 2,391 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Reading Grid | Tappily | 4,306 Kb |
Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!