Jump to content

Float right menu items not in hamburger menu for mobile


Jacquelyn
 Share

Recommended Posts

<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

YdV2e.png

8PvFZ.png

Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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 by niche
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...