Tagged: mobile logo
-
AuthorPosts
-
May 20, 2015 at 8:30 pm #447411
Hello,
I thought I had this (large centered logo) until I pulled it up in mobile. Can you help me with this? I have a very large centered logo (see link below), but it drops off completely on mobile.
I used this to center a large menu.
/* positions menu -secondary*/
nav.sub_menu {
left: -30% !important;
position: relative;
}
/* Centers logo and leaves it bigger size*/
.html_header_top.html_logo_center .logo {
left: 28%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
#header_main>.container {
padding: 0;
top: -215px;
}
.inner-container {
top: 210px;
}I tried the code shown for adding a second smaller menu below and tried adding to the child theme functions.php but no luck.
Thanks Lynn
May 21, 2015 at 7:11 pm #447935Hey Lynn!
Your image link is broken in the code. Please fix it or post temporary admin login credentials here privately so we can fix it for you. Logo does not show up on my end on mobile
Best regards,
YigitMay 21, 2015 at 11:13 pm #448082This reply has been marked as private.May 22, 2015 at 12:04 am #448094This reply has been marked as private.May 22, 2015 at 12:54 am #448104Hey!
Login credentials are not working for me, can you please check them once again?
Cheers!
YigitMay 22, 2015 at 1:50 am #448112This reply has been marked as private.May 23, 2015 at 6:17 am #448913Hey!
Please replace the code with this:
add_filter('avf_logo','av_change_logo'); function av_change_logo($logo) { if(wp_is_mobile()) { $logo = "http://mauston.org/wp-content/uploads/2015/05/mauston-logo-mobile.jpg"; } return $logo; }
Cheers!
IsmaelMay 23, 2015 at 12:15 pm #449044Hi Ismael,
Thanks for the code, but that one didn’t work either.
Any other ideas?
Lynn
May 24, 2015 at 3:16 am #449157Hi!
What is the mobile device that you’re using? Please remove browser cache then test it again.
Regards,
IsmaelMay 26, 2015 at 4:26 pm #450159Hi Ismael,
No it is not working. I tested it on a iPhone using Safari and Google search (downloaded an app or it, so it was fresh). then I also tested it on an android.
Thanks Lynn
May 28, 2015 at 8:06 am #450988Hey!
The wp_is_mobile function is still in beta so it may not cover all mobile devices, try to replace the code with this:
add_filter('avf_logo','av_change_logo'); function av_change_logo($logo) { $useragent = $_SERVER['HTTP_USER_AGENT']; if(preg_match('/(android|bb\d+|meego).+Mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) { $logo = "http://mauston.org/wp-content/uploads/2015/05/mauston-logo-mobile.jpg"; } return $logo; }
Remove browser cache then reload the page. This specific code works on my installation.
Cheers!
IsmaelMay 28, 2015 at 11:43 am #451119Hi Ismael,
I’ve added the above code to child theme functions.php, but it still does not work. darn. I reset the mobile browser cache file also.
May 28, 2015 at 6:39 pm #451354Hey!
You have following code in Quick CSS field
#header_main>.container { padding: 0; top: -215px; }
please change it to
@media only screen and (min-width: 990px) { #header_main>.container { padding: 0; top: -215px; }}
Cheers!
YigitMay 28, 2015 at 6:50 pm #451360Awesome, yes that worked. How would I center the logo on mobile? I used:
@media only screen and (min-width: 990px) {
#header_main>.container {
padding: 0px;
left: 20% !important;
top: -215px;
}}And a couple of other attempts, but it’s not picking it up.
Thanks Lynn
May 28, 2015 at 6:58 pm #451370Hi!
Code you used would be applied on screens larger than 990px. Please use following instead
.responsive .logo img { margin-left: 20%; }
Best regards,
YigitMay 28, 2015 at 7:09 pm #451376Yeah! Thanks Yigit and Ismael that works! Thanks for your awesome support once again.
-LynnOoops can I open this back up? Now the desktop version is messed up. I think it is cutting off at the 990px for @media query -or something else. Please take a look at let me know. If I don’t hear back in an hour or so, I’ll start a new thread.
- This reply was modified 9 years, 6 months ago by Lynnr321. Reason: now broken somewhere else
-
AuthorPosts
- The topic ‘Centered Large Logo not working on mobile’ is closed to new replies.