3 replies [Last post]
mrepko23
mrepko23's picture
Offline
newbie
Last seen: 2 years 45 weeks ago
Timezone: GMT-4
Joined: 2016-09-20
Posts: 2
Points: 3

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.

<!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 &amp; 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>

ramcom
ramcom's picture
Offline
Regular
Belgium
Last seen: 2 years 45 weeks ago
Belgium
Timezone: GMT+2
Joined: 2016-09-28
Posts: 13
Points: 16

please could you put the link

please could you put the link to website

mrepko23
mrepko23's picture
Offline
newbie
Last seen: 2 years 45 weeks ago
Timezone: GMT-4
Joined: 2016-09-20
Posts: 2
Points: 3

hello, this is the link:

hello, this is the link: http://www.nfsa.org/page/2017NAFSEHome

ntclick
ntclick's picture
Offline
newbie
Newyork
Last seen: 2 years 45 weeks ago
Newyork
Timezone: GMT+7
Joined: 2016-10-06
Posts: 1
Points: 1

you should not use table for

you should not use table for design