Tagged: mobile header
I would like to center the main logo, then under it the phone number, and then center a secondary logo under that, and finally have the mobile menu centered last. I also would like to shrink some spacing at the very top and under the mobile menu – see image.
Thanks for your help.
Hey advteksol,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 480px) {
#header_meta {
display: none;
}
#header .widget {
padding-bottom: 0;
}
.logo img {
margin: auto!important;
}
.logo {
width: 100%!important;
}
}
Best regards,
Yigit
That centered the first logo, but the phone number disappeared and the 2nd logo and the menu are still on the same line.
Hi,
We have updated the code please review the site now.
/* Change header in mobile */
@media only screen and (max-width: 480px) {
#header_meta {
margin-top:-30px;
}
#header .widget {
padding-bottom: 0;
}
.logo img {
margin: auto!important;
}
.logo {
width: 100%!important;
}
.phone-info{
display: block !important;
}
.phone-info h4{
transform:translate(-100%, 40px);
}
#widget_sp_image-2 img{
transform:translate(50%, 40px);
}
#advanced_menu_toggle {
transform:translateY( 160px);
margin-right: 45%;
}
}
Best regards,
Vinay
Looks great, except the menu needs is on the slider image now. How can I make the menu appear on a separate line between the 30+ years image and the slider tree image?
Thanks so much for your help!
Hi,
The site don’t look the same. Was there any changes made? Let us know if you still need any help.
Best regards,
Vinay
Nothing was changed other than I was able to move it to the right of the phone number, which works fine for now. You can close this thread.
Thanks.