Help on responsive navbar

1

I need some help getting my navbar to position correctly.

Here is my link:

https://codepen.io/sbfergus/pen/dyPPzJE?editors=1100

I’m real close but i dont know how to get the hamburger icon to display on the right side of the screen after clicking it. Also it appears the nav in smaller screen size has green bars of varying length, not sure how to resolve that either.

Any help would be much appreciated, been working on this for days and very burnt out…

2

Hi sbfergus,

I think the problem is coming from this line of CSS:

.nav-list.responsive li {
		float: none;
	}

Try changing that to float: right;

1 Like
3

Your the man! That worked to get the hamburger to move right but I’m still dealing with an awkward gap between the responsive menu options and the rest of the page. Any ideas on that?

4

Nevermind I figured it out. I had to remove the margin-right in this:

nav {
	display: relative;
	margin-right: 25px;
	float: right;
}
5

That’s funny, I had removed that margin as well because I thought it looked weird. I forgot to put that in my answer. Glad you figured that out, and glad to help.