Search the Community

<div class="topnav" id="myTopnav"> <div class="topnav-centered"> <a href="index.html">JACQUELYN MCGARRY</a> </div> <div class="topnav-right"> <a href="shop.html">SHOP</a> <a href="work.html">WORK</a> </div> <a href="about.html">ABOUT</a> <a href="contact.html">CONTACT</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> .topnav { position: fixed; top: 0; width: 100%; padding: 0px; } .topnav a { float: left; display: block; text-align: center; padding: 14px 24px 12px 24px; } .topnav a:hover { padding: 12px 22px 10px 22px; } @media screen and (max-width: 600px) { .topnav a{ float: none; display: block; } .topnav-centered a { position: relative; top: 0; left: 0; transform: none; } .topnav-right a{ float: none; position: relative; } } .topnav .icon { display: none; } @media screen and (max-width: 500px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: left; display: block; } } .topnav-centered a { float: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topnav-right { float: right; } @media screen and (max-width: 500px) { .topnav.responsive {position: fixed;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; /* text-align: left;*/ } } My float right menu items don't nest in the hamburger menu. I tried float:left on mobile for topnav-right with no luck. I have no idea how to fix it. Code has been personalized from w3schools tutorials

Hello All, (I'm not quite sure where the problem derives from, so I'm just posting this in the General section) Here's the problem I've been having with some sites. The main navigation with drop down menus when they're responsive/mobile menus. For instance this site I'm currently working on: communicationsexpress.oiw9.com. Minus the top level "about us" btn, (for now I took the link off of the top level "about us" button and added an "about us home" btn at the bottom of the drop down.) the top level btn's all link to the index pages of their sections. Great. Now, when you shrink the screen or go to mobile version and the "hamburger" menu pops up, I'm having some conflict with those top level btn's when there linked. On some devices, if you click on the top level btn, instead of the drop down showing first then clicking on what link you want, it just goes to that btn's link. If that makes sense. Basically, I'm trying to figure out a work around so that main btn works properly in mobile versions and not have to have a "page home page" btn for each top level section btn. Or at least not have that on the main site and possibly just have that on maybe a separate mobile menu...which might be a pain in the ###### to try to use separate menus. Any and all suggestions and help is greatly appreciated! Thanks in advance, mh