Jump to content

Float right menu items not in hamburger menu for mobile


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 post
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 post
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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...