I have successfully implemented a hamburger mobile menu, but I encountered issues when trying to include contact information within the menu.
After experimenting with two different approaches, I found that the first method worked on all devices except iPhones and those mainly using Safari. In those cases, the text line would break causing a formatting issue.
This first approach also required the use of media queries. Interestingly, the layout appeared fine when inspected on a desktop, but on actual phone devices, the text line broke into two after the icons.
Below is the source code for this approach:
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix">
<p class="makeSmall" style="text-align: center;">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1aca0b8a081aca0b8a0a3a0b3a3a4b3efa2aeefa8ad">[email protected]</a>">
<img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> </a>
<a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">|</label></a> <span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643"> 052-6582643</a></span></p>
</div>
</div>
Although the second approach I tried had some success, the icons appeared smaller than the defined pixel size, resulting in a messy overall appearance.
<div class="elementor-text-editor elementor-clearfix elementor-inline-editing" data-elementor-setting-key="editor" data-elementor-inline-editing-toolbar="advanced">
<p class="makeSmall" style="text-align: center;">
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d505c445c7d505c445c5f5c4f5f584f135e52135451">[email protected]</a>">
<img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> </a>
<a href="https://www.facebook.com/mayabarbercontrolcenter/"><img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">|</label></a> <span class="" style="color: #001a71;" data-mce-fragment="1"><a href="tel:0526582643"> 052-6582643</a></span></p>
</div>
CSS code:
.mobilemenucontact {
white-space: nowrap;
position: relative;
width: 100%;
display: inline-block;
}
#mobilemenucontact {
white-space: nowrap;
position: relative;
width: 100%;
display: inline-block;
}
@media only screen and (max-width: 375px) {
.makeSmall {
font-size: 95%;
}
}
@media only screen and (max-width: 375px) {
.email-mobile {
width: 28px;
}
}
@media only screen and (max-width: 375px) {
.facebook-mobile {
width: 28px;
}
}
@media only screen and (max-width: 375px) {
.column-contact {
padding: 5px 30px;
}
}
.active {
border-bottom: 2.11px solid #61f6ff;
padding: 4px;
box-sizing: border-box;
margin-bottom: 4px;
}
I'm unsure which approach to choose, as I want the two icons and the phone number to remain on one line regardless of the browser or device used. Additionally, I want the spaces between them to be equal and the icons to be 33px wide.
You can view both approaches on the website www.mayabarber.co.il
If you prefer to provide your own responsive HTML/CSS code, here's an image of how I'd like it to look: https://i.sstatic.net/Es5Gl.png
Thank you!