Image overlapping tabs

[julian10m]

Hi Dean, thanks a lot for the theme.

I think there is an issue with the tabs ("About Me", "Projects", etc) and the image. More precisely, I am referring to the moment when the display switches from a to b:

a) displaying all the tabs,
b) displaying just the button that gathers all the options (more for mobile case).

In my case, I added a 4th tab. What I see that happens is that, when I decrease the width of browser, there are intermediate states between a) and b) where the first tab (the one more to the left) finishes being almost/completely hidden beneath the image.

I also noticed that my name, of round 18 characters, finishes being displayed "extremely" close to the left border, which makes it a little bit unpleasant to the eye. While for Google Chrome this does not happen at all, the issue is revealed appears when using Mozilla.

Well, that's all. Minor things, but they catch my attention and I have no idea where to touch to solve it myself.

Have a nice day,

Best,
Julian

[daattali]

Hi Julian,
Thanks for your concern. Unfortunately design issues like these are impossible to prevent in a generic way. For a single website you can get the layout to work the exact way you want it to by modifying the CSS to be pixel perfect, but in a generic template that supports any browser width and any arbitrary number of tabs, you're bound to run into these sort of issues. My best suggestion is either to remove the avatar image altogether, or you can just move it down a bit with CSS

[cryptic0]

I was just about to open a new issue with this exact comment. Now I will look into CSS. My problem has been that on pages that don't have a lot of content, there is no way to scroll down to make the avatar image dissolve as it normally does.

[cryptic0]

main.css: L196:200

I made the following changes:

@media only screen and (min-width: 768px) {
  .navbar-custom .avatar-container {
    width: 75px;
    margin-top: -10px;
  }

[daattali]

Glad you sorted it out!