fix: fix the subtitle and site-nav-toggle are overlapping on the mobile case

[Jacksgong]

fix the subtitle and site-nav-toggle are overlapping on the mobile case:

Problem

Fixes

[ivan-nginx]

@Jacksgong and on other resolutions how it will look?

[Jacksgong]

Because of the subtitle is horizontal-center, so if the subtitle is short you will can't reproduce such problem, but if the subtitle is a little long you can reproduce such problem on the mobile case very easy.

[Jacksgong]

I have fixed such problem on my blog.

[ivan-nginx]

Tested it. 35% from the top - it's not right for alignment. site-nav-toggle on other resolutions will in other vertical alignment from main header label.
But, yes, need to fix this bug by another way.

[ivan-nginx]

@Jacksgong see, i have 4 screens in different resolutions:

Need to fix this bug, but not by this metod.

[Jacksgong]

@ivan-nginx I think this way is good enough to fix most resolution cases on the mobile, If you care about all cases there is no solution because tons of problem will occur, such as:

[Jacksgong]

@ivan-nginx And I think you are misunderstanding with this solution.

This solution just effect for mobile case, what is if the browser width less than or equal to 767px

mobile() {
  @media (max-width: 767px) {
    {block}
  }
}

So the problem of below is another problem, not on the mobile case:

.

[ivan-nginx]

@Jacksgong upper your screen - it's not right resolution on any mobile devices. =)
Need to test it on special services, like http://www.responsinator.com/
Yep. Problem with subtitle.

[Jacksgong]

@ivan-nginx it has been tested on my phone, and you can test it on chrome development tools with any resolution you want easily. Also thanks for the test website you provided.

[iissnan]

This might be the quick fix based on current implementation of mobile menu toggle, and I think it is acceptable for now.

Another solution is to use a flex or fluid layout to separate the header section into 3 pieces:

• Menu toggle
• Title and description
• Resolved area (for search for example)

This should be the better one. What do you think? @Jacksgong @ivan-nginx

[ivan-nginx]

flex

That's right.
Menu (if is mobile) + Tilte & Desc — into flex.

See, i was made flex style on social fb & vk like buttons there: https://github.com/iissnan/hexo-theme-next/pull/1381/files#diff-a27b6018d8564ec7bbd5895a07822ec6R46
And this is right alignment on any devices and resolutions, with any one or both buttons. Need to do like this, i think.

[Jacksgong]

Thanks, you are right, flex or fluid layout would be better choise.

[stevenjoezhang]

Fixed in theme-next/hexo-theme-next#1387 using flex layout