Need help with navbar for mobiles

About 4 days ago I started fooling around with a Portfolio design. Because of me being me I ended up with crudely sewn Frankenstein’s monster :smiley: But first things first, I took an inspiration from W3 portfolios for a color scheme and content display. Although the original was made in W3.css, I decided to go ahead and mimic their navbar.

What’s the problem? It looks good only on screens larger than 700px (yay!), but is ugly on lesser viewports. I created some media for smaller mobiles, so it would present itself in a less ugly fashion.

I did some research and had no success in producing a desired effect. Had even a desire to tear things down and start over.

Is there a way to display it better without the need of visibly altering the >700px navbar style and behavior? Ideally a hamburger menu for mobiles would be desirable.

Here is my github: https://github.com/Folrunge/Projects/tree/master/Portfolio
And here are medias from preproc.scss file:

//Navbar style for media greater than 700px
@media screen and (min-width: 700px) {
	ul {
	position: fixed;
	height: 100%;
	width: 15%;
	left: 0px;
	top: 0px;
	background-color: $navcolor;
	overflow-x: hidden;
	li {
		padding-top: 1%; 
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 13%;
		border: none;
		border-color: $navcolor;
	}
}
}
//Navbar style for media lesser than 690px
@media screen and (max-width: 690px) {
	h3 {
		text-align: center;
	}
	#Contact {
		p {
			text-align: center;
		}
	}
	#resume {
		width: 100%;
		height: auto;

	}
	ul {
		background-color: $navcolor;
		li {
		padding: 5%; 
		align-items: center;
		justify-content: center;
		border: none;
		border-color: $navcolor;
		}
	}
}

My navbar is an ul with li elements. Help me FCCers. You are my only hope :stuck_out_tongue:

P.S. The portfolio is pretty much WIP, so please, bear with some imperfections :wink:

Make it on github pages so we can see it and share it’s link.

Thanks. Didn’t know about this feature on Gh (-1 to Github peasantry there) :wink:

Here is the page:
https://folrunge.github.io/Projects/Portfolio/

Additionally I also created a Codepen project (though without images):

https://codepen.io/Folrunge/project/editor/ZjqPQe

While waiting for any reply, I’m trying to come up with a solution (no luck so far). Tips and suggestions will be most welcomed.

So, you need an hamburgern menu icon in mobile screens, you can add the icon ☰ (☰), apply this, you will get a menu icon

And add a js function by toggling the hidden and block classes on the navbar

1 Like

Great idea, thanks! :wink:

This and this has some interesting menus. I’m suggesting these 'cause repairing yours are to much “fuzzy” to “repair”. And you can always use browsers “inspect” on them navbars to see theirs css if you don’t wanna use botstrap.