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 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
P.S. The portfolio is pretty much WIP, so please, bear with some imperfections