To achieve a Header Layout like this. You can check demo here.
#1. First, edit Site Header
#2. Click Edit Design
#3. Choose this Header layout
#4. Hover on Logo > Click Add Elements
#5. Enable Button only
#6. Click on Button > Click Pencil icon
#7. Add your email
We will have
#8. Use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or send me an email.
a.btn {
background-color: transparent !important;
border: none !important;
color: #000 !important;
}
a.btn:before {
content: "i";
background-color: #ef3e69;
display: inline-block;
width: 40px;
height: 40px;
color: #fff;
line-height: 40px;
border-radius: 50%;
font-weight: bold;
font-size: 18px;
}
div.header-nav-item>a {
padding: 3px 5px !important;
}
div.header-nav-item>a:hover {
background-color: rgba(17,17,17,.05);
}
Result
#9. You can adjust circle text/color/size here.