navigation spacing is not consistent

[vpetkar]

The main navigation (in full desktop view) has inconsistent spacing. For example, the item "SESA" has significantly more padding/margins than a larger item such as "First Year Tips". I understand this is because a fixed width is being used for all tabs, however I think there is merit in maintaining spacing even if the sizing of the nav buttons would differ. This seems to be a pretty commonly accepted standard and most websites with similar navigation functions seem to maintain spacing.

For an example implementation, check out my website: https://vedpetkar.com or Bootstrap's project website: http://getbootstrap.com/.

[CraigBryan]

Yeah, I agree with you, the nav bar isn't looking so hot any more. The even-width nav headers is a hold-over from when there was a lot less in the header. There used to be a lot more white space between the individual links in the nav bar and it looked good. Then we added a bunch of social media and some more links to parts of the website and it's become pretty crowded.

We have been meaning to update the nav bar to something that works and looks nicer. PR's are always appreciated if you have a good idea how we can fix this.

[mtuck063]

It's foundation that sets the width for the tabs, it give you a format similar to a table where all the widths in the columns are the same.

Here is a screenshot of what you are suggesting, if people like/prefer it I'll push my code to the repo.

[CraigBryan]

Tucker, make a PR and I'll test it at various resolutions to make sure it looks good for all.

[mtuck063]

Alright

[vpetkar]

@mtuck063 looks great to me.

I'd also consider finding uniform icons for Twitter/Facebook/Instagram/Mail. It helps build a consistent design language but maybe I should open another issue for that.

[CraigBryan]

Define what you mean by "uniform icons" in this case.