How to get the overlaps effect when the width is reduce? - html

Question

I imitate a website: https://open.weixin.qq.com/
You see the overlaps is my requirement, if I reduce the width of browser.
But in my project when I reduce the browser width, I will get the this irksome effect:
My code is bellow, the images can not shows up but this is not the point:
.header {
width: 100%;
height: 68px;
background-color: #363636;
}
.container {
margin-left: 40px;
margin-right: 40px;
}
.container > div {
display: inline-block;
}
.logo {
height: 100%;
width: 240px;
}
.logo img {
width: 100%;
height: 100%;
}
.nav {
display: inline-block;
}
.nav li {
width: 96px;
height: 100%;
color: #afafaf;
line-height: 68px;
float: left;
}
.nav li :hover {
color: #fff;
text-align: center;
}
.nav .selected {
color: #fff;
}
.right-buttons {
float: right;
}
.login-logout {
float: right;
display: inline-block;
height: 68px;
color: #ffffff;
line-height: 68px;
}
.qrcode {
float: right;
display: inline-block;
width: 68px;
height: 68px;
align-content: center;
line-height: 68px;
}
.qrcode img {
line-height: 68px;
width: 14px;
height: 14px;
}
<div class="header">
<div class="container">
<div class="logo">
<img src="../../assets/img/common/logo.png">
</div>
<ul class="nav">
<li class="nav-item selected">首页</li>
<li class="nav-item">数据中心</li>
</ul>
<div class="right-buttons">
<div class="login-logout">
<button>登录/注册</button>
</div>
<div class="qrcode">
<img src="../../assets/img/home/little-qrcode.png">
</div>
</div>
</div>
</div>
How can I get the upper effect?

Answer 1

As I understood, you need right-buttons div overlapped to nav ul instead of going to next line.
Apply "position:absolute" and "right: 0" to right-buttons instead of "float: right".
But in smaller widths, overlapping will confuse the user. So its better you make it responsive for all devices.