How can I make my navbar responsive with 8 links?
I've made responsive navbars before, but only with 3 or 4 links. I'm developing a digital portfolio, but the navbar has 8 links in it. This Jsfiddle will show what I have: https://jsfiddle.net/7nwg6v5k/7/.
I'll make it so that when the screen gets too narrow it transitions to a hidden menu. On full-size screens my current nav works well, but even at slightly smaller screens the text wraps and some links overflow.
I'm not sure of a good way to make this work. I don't want it to change to a menu before screen with gets below one third of full size. Sorry if I've not worded this well. Anyone have any ideas? Thanks
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
2 Replies
Simplest solution is the best: Don't have 8 links on your navbar.
You should shorten your navbar by, for example, grouping similar items.
You could fit your qualifications and CV somewhere on your "About Me" page. But if you really want it on your navbar, you should create a dropdown for "About Me" that includes links to your qualifications and CV.
Not sure why you need extra page for social media? If it's only for links you could fit it somewhere on your "Contact Me" page or make dropdown for them as well.
This way you will simplify your navbar and make it easier for visitors to navigate your website.
Dropdowns sound like a good idea, and I'm making this portfolio for a college assignment and I need at least 8 pages. Maybe I will put the social media links in contact and figure something else for page 8. Thanks!