06-Oct-2016, 07:52 AM
I am trying to get the logo on top of the navigation for mobile devices. Right now it stays to the left and the menu items go off the screen.
PHP Code:
<?php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #none;
font: 17px Arial;
}
ul.topnav li {float: left;
border-right:0px solid #bbb
}
ul.topnav li a {
display: block;
color: black;
text-align: left;
padding: 20px 22px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #219DD7;}
ul.topnav li a.active {background-color: #219DD7;}
ul.topnav li.left {float: left;}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 12px 14px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #219DD7;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: White;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #219DD7}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
div.image {
float: left;
}
nav {
float: left;
}
</style>
</head>
<body>
<div class="image">
</div>
<ul style="width: 100%; height: 195px;">
<table align="center" style="width: 100%; max-width: 1124px;">
<tbody>
<tr>
<td><span style="color: rgb(0, 0, 0);"></span>
<a href="http://www.nfsa.org/page/2017NAFSEHome"><img style="height: 187px; float: left;" src="/resource/resmgr/2017_NAFSE/NAFSELogoTransparentSMALL.fw.png"></a>
<ul class="topnav">
<li style="text-align: center;"><a class="active" href="#home">Register</a></li>
<li style="text-align: center;"><a href="#news">Schedule</a></li>
<li style="text-align: center;"><a href="#contact">Hotel & Travel</a></li>
<li style="text-align: center;"><a href="#about">Exhibitor Info</a></li>
<li class="dropdown" style="text-align: center;">
<a class="dropbtn" href="#">SPONSORSHIPS</a>
<div class="dropdown-content">
<a href="http://www.nfsa.org/page/2017NAFSESponsorship">Become a Sponsor</a>
<a href="http://www.nfsa.org/page/2017NAFSESponsors">Our Sponsors</a>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</ul>
<table align="center" style="width: 100%; max-width: 1124px;">
</table>
</body>
</html>