Jacquelyn Posted January 14, 2021 Share Posted January 14, 2021 <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 Link to comment Share on other sites More sharing options...
niche Posted January 14, 2021 Share Posted January 14, 2021 (edited) Please resend the code you're actually using in the order you're using it so we can see exactly what you see. Also, please edit out the irrelevant parts if possible. Edited January 14, 2021 by niche Link to comment Share on other sites More sharing options...
Jacquelyn Posted January 14, 2021 Author Share Posted January 14, 2021 thank you niche, editing now Link to comment Share on other sites More sharing options...
Jacquelyn Posted January 14, 2021 Author Share Posted January 14, 2021 hello @niche! So i didn't end up changing anything, this is what I see when looking at my html and css. I removed styling elements (before posting), would it be helpful to remove anything that isn't for mobile? I wasn't sure where to cut it down. Thank you Link to comment Share on other sites More sharing options...
niche Posted January 14, 2021 Share Posted January 14, 2021 (edited) Great to know except solving CSS questions is a lot easier when I can use the developer tools built into every browser. If you wrote the code, it will be easy to edit down. If not, I'd just be guessing with no real chance of helping you get the right answer based on what you sent. There are too many moving parts and ambiguities. For example, what's a hamburger menu?? FYI, I loaded what you posted and what I saw looked nothing like your screen shot. Edited January 14, 2021 by niche Link to comment Share on other sites More sharing options...
dsonesuk Posted January 14, 2021 Share Posted January 14, 2021 I suggest you place non media query styling above the uppermost media querythe hamburger icon should be on the right from the start using position absolute, then hidden till required using display none/block for the device width it is required. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now