I've created a fixed side nav bar and header and i'd like to create a grid within the content section of the page, however, when i add in any main content, it pushes below the fixed side bar and does not show from just below the header.
I've been scrolling through stack and google to see if i can fix the issue, but none of though solutions has worked.
I've made a code pen for visuals and seeing the code:
https://codepen.io/nyxerian/pen/ZEBKMJg
As you'll see the h2 title should be in line with the Home button at the top of the screen.
What am I missing?
HTML
<!DOCTYPE html>
>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="basic.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
</head>
<body>
<!-- start: SIDEBAR NAV AND HEADER -->
<div class='fixed header'></div>
<div class='fixed side'>
<img class="smartlogo" src="PNG1.png" alt="smart">
<nav class="sidebar">
<div class="text"></div>
<br>
<ul>
<li class="active"><i class="fas fa-home" style="color:#2DAAD6;"></i> Home</li>
<li><i class="far fa-handshake fa-fw" style="color: #2DAAD6;"></i> Sell</li>
<li><i class="fas fa-chart-line" style="color: #2DAAD6;"></i> Dashboards</li>
<li><i class="fas fa-boxes" style="color: #2DAAD6;"></i> Inventory</li>
<li><i class="far fa-credit-card" style="color: #2DAAD6;"></i> Payments</li>
<li>
<i class="far fa-folder-open" style="color: #2DAAD6;"></i> Leads
<ul class="lead-show">
<li>Referrals</li>
<li></i>Management</li>
<li>Settings</li>
</ul>
</li>
<li><i class="fas fa-users" style="color: #2DAAD6;"></i> Teams</li>
<li><i class="far fa-clipboard" style="color: #2DAAD6;"></i> Reporting</li>
<li><i class="fas fa-tools" style="color: #2DAAD6;"></i> Settings</li>
</ul>
</nav>
</div>
<div class='scrollable'></div>
<script>
$('.lead-btn').click(function () {
$('nav ul .lead-show').toggleClass('show')
$('nav ul .first').toggleClass('rotate')
})
$('nav ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Nordstern', Helvetica;
}
.scrollable {
height: 2000px;
width: 500%;
margin: 0 auto;
}
.fixed {
position: fixed;
}
.header {
top: 0;
left: 0;
right: 0;
height: 100px;
background-image: linear-gradient(
to right,
#436c89,
#6ca1cd,
#60b9c0
) !important;
}
.smartlogo {
width: 140px;
height: 45px;
margin-left: 40px;
margin-top: 30px;
}
.side {
top: 0;
left: 0;
bottom: 0;
width: 240px;
background-color: #e7e6e6;
}
.sidebar {
height: 80%;
width: 240px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #e7e6e6;
margin-top: 85px;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: black;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
justify-content: left;
background: #e7e6e6;
letter-spacing: 1px;
}
nav ul {
background: #e7e6e6;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: black;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: black;
background: #e7e6e6;
border-left-color: #60b9c0;
}
nav ul li a:hover {
background: #ffffff;
}
nav ul ul {
position: static;
display: none;
}
nav ul .lead-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: Black;
background: #e7e6e6;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: black !important;
background: #ffffff !important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
i {
display: inline-block;
margin-right: 15px;
}
Related
I'm building a navigation bar and the code if fine in the desktop mode.
When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
#media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><i class="far fa-star"></i> Rewards</li>
<li><i class="fas fa-user-friends"></i> Connect</li>
<li><i class="fas fa-video"></i> Watch</li>
<li>
<i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
Why is my social media icons not showing in my footer? Need help finding out why my social media icons are not appearing in my footer.
Instead the social media icons is appearing in the center of the page so it seems like the position has jumped out of the doc.
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 25px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 30px;
}
body{
margin: 0;
padding: 0;
}
footer {
background: #19252A;
}
ul{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
ul li{
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background: #fff;
text-align: centre;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before{
background: #cd201f;
}
ul li:nth-child(4) a:before{
background: #e4405f;
}
.container{
width:1000px;
margin:auto;
overflow:hidden;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<footer>
<div class="container">
<div class="box2">
<p>
**************************************************************
</p>
<ul class=social-media-icons>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Try this, Hope this help thank you
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 25px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 30px;
}
body{
margin: 0;
padding: 0;
}
footer {
background: #19252A;
}
.box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
ul{
display: flex;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) */
}
ul li{
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background: #fff;
text-align: centre;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before{
background: #cd201f;
}
ul li:nth-child(4) a:before{
background: #e4405f;
}
.container{
width:1000px;
margin:auto;
overflow:hidden;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<footer>
<div class="container">
<div class="box2">
<p>
**************************************************************
</p>
<ul class=social-media-icons>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
The dropdown instead of going below the nav bar just replaces the link. I have tried everything but couldn't find a solution.
#charset "UTF-8";
body {
margin: 0px;
padding: 0px;
}
/*Top Nav*/
.toptitle {
background-color: #7acc68;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.toptitle p {
margin: 0px;
padding: 0px;
overflow: hidden;
font-family: 'Source Code Pro', monospace;
font-size: 35px;
color: black;
font-weight: bold;
}
.navbar {
background-color: #7acc68;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.navbar a {
float: left;
font-size: 25px;
color: black;
margin: 0px;
padding: 10px;
font-family: 'Source Code Pro', monospace;
}
.navbar a:hover {
background-color: #c9c9c9;
}
.dropdown {
float: left;
overflow: hidden;
position: relative;
display: block;
color: rebeccapurple;
}
.dropdown a {
margin: 0px;
padding: 10px;
overflow: hidden;
}
.dropdown:hover .dropdownContent {
display: block;
}
.dropdownContent {
display: none;
background-color: #c9c9c9;
margin: 0px;
padding: 0px;
overflow: hidden;
position: absolute;
z-index: 1;
}
.dropdownContent a {
display: block;
}
/*Bottom nav*/
.bottombar {
background-color: #7acc68;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
/*Main Content*/
.maincontent {
background-color: #d3d3d3;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
color: black;
font-family: 'Roboto', sans-serif;
}
<!--Fonts---Roboto,Source Code Pro--->
<link href="https://fonts.googleapis.com/css?family=Roboto|Source+Code+Pro" rel="stylesheet">
<!--Font Awesome--->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="toptitle">
<p> Jacob Tufts</p>
</div>
<div class="navbar">
Home
About
Programmer
<div class="dropdown">
Computer Guy<i class="fa fa-caret-down"></i>
<div class="dropdownContent">
General <b>IT</b>
Networking
</div>
</div>
<div class="dropdown">
Technician<i class="fa fa-caret-down"></i>
<div class="dropdownContent">
Audio
Lighting
projection
</div>
</div>
<div class="dropdown">
Videographer<i class="fa fa-caret-down"></i>
<div class="dropdownContent">
Editing
Video
</div>
</div>
</div>
<div class="maincontent">
<p>gegeheheh</p>
</div>
<div class="bottombar">
<p>egegege</p>
</div>
First of all you have to choose appropriate html tag and also need to know their right uses. It will be better to write each navbar link in list items because each item are collection of list or you can put link inside div as well. Likely, You also must know about how to control and style your html. Following code work properly, try this one:
Your html code:
<div class="navbar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li class="dropdown">
Programmer <i class="fa fa-caret-down"></i>
<ul class="dropdown-content">
<li>General <b>IT</b></li>
<li>Networking</li>
</ul>
</li>
<li class="dropdown">
Technician <i class="fa fa-caret-down"></i>
<ul class="dropdown-content">
<li>Audio</li>
<li>Lighting</li>
<li>Lighting</li>
</ul>
</li>
</ul>
</div>
Now you need to put corresponding css to style above navbar:
.navbar {
background-color: 7acc68;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar ul li {
display: inline-block;
}
.navbar ul li a {
display: inline-block;
color: #ffffff;
padding: 8px 10px;
}
.navbar ul li a i {
padding-left: 5px;
float: right;
}
.navbar ul li.dropdown {
position: relative;
}
.navbar ul li.dropdown .dropdown-content {
background: #000000;
position: absolute;
min-width: 150px;
left: 0;
top: 100%;
display: none;
}
.navbar ul li.dropdown .dropdown-content li {
display: block;
}
.navbar ul li.dropdown .dropdown-content li a {
display: block;
}
.navbar ul li:hover > a {
background-color: #c9c9c9;
color: #000000;
}
.navbar ul li.dropdown:hover .dropdown-content {
display: block;
}
I'm having problems where my dropdown menu made with CSS and HTML will force a linebreak and the dropdown menu will glitch out. You can see this problem by running my code.
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: static;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Home
</li>
<li>
About Us <i class="fa fa-angle-down" aria-hidden="true"></i>
</li>
<li>
Bolivia
</li>
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
Whenever you hover over "products" the code glitches out and forces a line break. I want to make it so that it doesnt affect the flow of the document. I've already tried to set the float to left and that didn't work.
Thank you!
Instead of position: static; on .dropdown I would go with position:absolute
You will need to iron out some padding and margin of your ul and li tags for proper fit
add position:relative to .dropdown li
See snippet below (I took out some menu items to ensure proper inspection of your product sub-menu where the issue lies)
/* HEADER/NAVBAR */
.main-nav {
text-decoration: none;
list-style-type: none;
display: inline;
text-align: center;
}
li {
display: inline-flex;
margin-left: 70px;
padding-bottom: 0px;
position: inherit;
text-transform: uppercase;
font-family: 'Hind', sans-serif;
font-size: 14px;
}
.nav {
display: inline-block;
padding-bottom: 45px;
margin-top: 65px;
margin-left: 150px;
}
img {
height: 80px;
padding: 20px 0px 0px 20px;
margin: 0px 0px 20px 9%;
display: inline-flex;
float: left;
}
a {
color: #6b6b6b !important;
text-decoration: none;
font-weight: 600;
}
.wrapper {
margin: 0px 9%;
background-color: #f0f0f0;
size: 100vh;
height: 100vh
}
body {
background-color: #f7f7f7 !important;
margin: 0px;
}
.sticky {
background-color: #fff;
}
/* DROP DOWN MENUS */
ul li a:hover {
color: #fff;
;
}
ul li ul.dropdown {
min-width: 10px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
padding: 0;
}
.dropdown li {
margin: 0px;
list-style-type: none;
position: relative;
left: 0px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 40px;
padding-left: 40px;
background: #f2f2f2;
}
.main-nav {
position: relative;
}
ul li:hover ul.dropdown,
ul.dropdown:hover {
display: block;
/* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
/* LEGAL STUFF */
.legal {
background-color: #444444;
height: 20vh;
text-align: center;
}
.copy {
padding: 4%;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Hind:400,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="copla.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Copla</title>
</head>
<body>
<nav class="sticky">
<div class="row">
<img src="logocopla.Jpg" alt="Copla Logo" class="logo">
<div class="nav">
<ul class="main-nav">
<li>
Products <i class="fa fa-angle-down" `aria-hidden="true"></i>`
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
</div>
<div class="legal">
<p class="copy">. All rights reserved.</p>
</div>
</body>
</html>