Moblie friendly top navbar
How do I make an moblie friendly top navbar?
Mobile friendly navbar with semi transparent gradient. What is a moblie friendly top navbar? How do you make a moblie friendly top navbar? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.
Moblie friendly top navbar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Moblie friendly top navbar</title> <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! */ * { padding: 0px; margin: 0px;
}
html { max-width: 400px; margin: 0px auto;
}
body,
html { font-family: "Roboto"; font-size: 16px; font-weight: 300; color: #333;
}
body { padding-top: 50px;
}
a { color: #157dfb;
}
header,
header .head-btn,
header h1 { height: 40px; line-height: 40px;
}
header { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 100%); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
}
header h1 { text-align: center; font-size: 18px; font-weight: 400;
}
header .head-btn { position: absolute; top: 0px; padding: 0px 10px;
}
header .head-btn-left { left: 0px;
}
header .head-btn-right { right: 0px;
}
header .head-btn a { text-decoration: none;
}
section { padding: 10px;
}
section p { margin: 20px 0px;
}
section img { max-width: 100%; display: block;
}
section h2 { font-size: 16px; font-weight: 400; text-align: center; margin-bottom: 20px; text-transform: uppercase;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <div class="head-btn head-btn-left"> <a href="#">Menu</a> </div> <div class="head-btn head-btn-right"> <a href="#">Settings</a> </div> <h1>Page title</h1>
</header>
<section> <h2>Scroll down</h2> <img src="http://lorempixel.com/800/600/?1" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque turpis et vehicula hendrerit. Integer dapibus sem fermentum, cursus lectus sed, commodo eros. Ut blandit tellus eget dui porta posuere. Suspendisse eget convallis augue. Donec quis congue orci. Pellentesque sed tempor neque. Phasellus magna mauris, faucibus non urna ac, scelerisque scelerisque massa. Quisque sagittis justo nunc, et aliquet risus dignissim eget. Morbi eu velit commodo tortor tincidunt placerat. Donec vel nulla tortor. Fusce vulputate placerat augue, at tincidunt massa facilisis ut. </p> <img src="http://lorempixel.com/800/600/?2" /> <p> Nulla eget justo porttitor diam adipiscing semper. Nullam vitae massa dignissim, commodo purus sed, scelerisque est. Maecenas in risus nec dolor tristique mattis. Pellentesque ligula libero, tempus vel fringilla id, pretium lacinia nibh. Praesent cursus lacus vitae vulputate pharetra. Suspendisse pretium viverra elit, mollis pulvinar est consectetur eget. Sed condimentum bibendum diam mattis placerat. Integer tempus at mauris a interdum. </p> <img src="http://lorempixel.com/800/600/?3" /> <p> Nam gravida lorem consequat ante malesuada malesuada. Vestibulum aliquam ligula ut eros vulputate, ac hendrerit sapien imperdiet. Mauris pretium in mi non dignissim. Nulla consectetur eget elit et auctor. Curabitur volutpat augue eu quam lobortis, in cursus est pulvinar. Praesent et neque massa. Integer est lacus, semper ut erat ut, congue malesuada lacus. Donec quis fermentum purus, non iaculis nisl. Praesent non ultrices leo, quis cursus justo. Nulla vitae posuere tellus, a lacinia lectus. </p> <img src="http://lorempixel.com/800/600/?4" /> <p> Morbi elit massa, gravida non lectus a, tincidunt hendrerit nisl. Duis sit amet lorem lacinia nibh lacinia tristique ut nec ligula. Pellentesque sem velit, vestibulum vitae congue quis, rutrum id velit. Ut dictum eu lacus vitae mattis. Mauris elementum augue ac posuere sagittis. Quisque malesuada risus quis metus tempor feugiat. Sed a iaculis mauris. Morbi ultricies semper libero. Etiam laoreet lectus eros, ac porttitor nunc sagittis ultrices. Donec eu elit eget ipsum feugiat vehicula in non neque. Curabitur in erat risus. Pellentesque sed quam sagittis lectus tempus consectetur pellentesque non sem. Duis a tellus ultricies, tristique nibh ac, semper erat. </p> <img src="http://lorempixel.com/800/600/?5" /> <p> Sed ligula nisl, eleifend sit amet imperdiet at, accumsan at dui. Integer scelerisque dui vitae tellus porta vehicula. Suspendisse ut ante eget sapien sollicitudin mollis sed sed tortor. Suspendisse commodo dui nisl, at elementum ligula semper quis. Aliquam tristique eu odio id placerat. Curabitur ornare vulputate eros at rhoncus. In suscipit est id faucibus commodo. </p>
</section>
</body>
</html>
Moblie friendly top navbar - Script Codes CSS Codes
* { padding: 0px; margin: 0px;
}
html { max-width: 400px; margin: 0px auto;
}
body,
html { font-family: "Roboto"; font-size: 16px; font-weight: 300; color: #333;
}
body { padding-top: 50px;
}
a { color: #157dfb;
}
header,
header .head-btn,
header h1 { height: 40px; line-height: 40px;
}
header { position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 100%); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 2px 0px;
}
header h1 { text-align: center; font-size: 18px; font-weight: 400;
}
header .head-btn { position: absolute; top: 0px; padding: 0px 10px;
}
header .head-btn-left { left: 0px;
}
header .head-btn-right { right: 0px;
}
header .head-btn a { text-decoration: none;
}
section { padding: 10px;
}
section p { margin: 20px 0px;
}
section img { max-width: 100%; display: block;
}
section h2 { font-size: 16px; font-weight: 400; text-align: center; margin-bottom: 20px; text-transform: uppercase;
}
Developer | Nick Nikolov |
Username | necks |
Uploaded | October 17, 2022 |
Rating | 3 |
Size | 3,556 Kb |
Views | 18,216 |
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 |
Spinning Loader | 2,273 Kb |
Single element speech bubble | 3,191 Kb |
Simple grid layout | 1,978 Kb |
User Icons | 3,351 Kb |
Simple fluid navigation with 4 hover effects | 3,336 Kb |
XSellco SVG animated logo | 4,358 Kb |
Page header bar toggle on scroll | 4,141 Kb |
Range bar with indicator | 3,312 Kb |
4 color border for highlighting feature elements | 4,105 Kb |
Simple drawer menu | 5,625 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 |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Responsive Boxes without Images | Andymcfee | 4,120 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!