-
Posts
-
Is there a way of using a different logo for mobile view? When I use the horizontal version, it overlaps the menu on an iphone.
See image for example:
https://dl.dropboxusercontent.com/u/52916400/dovmobile.PNGHey erik!
Please add following code to Quick CSS
@media only screen and (max-width: 480px) { .logo img { opacity: 0; } .logo a { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; }}Cheers!
YigitGreat!
And how should I address the custom text in the header that is behind the logo?
https://kriesi.at/support/topic/how-do-we-get-our-business-information-in-the-header-opposite-the-logo/Hey!
You can use following code
@media only screen and (max-width: 480) { .custom_info { display: none; }}That code would remove it on mobile. What exactly would you like to do?
Cheers!
YigitI have to tell you, you are awesome. I just put the info in the mobile logo – so now, I just need to left align it.
And if there’s a way to get the transparency back for mobile, that would be awesome.
See here:
https://dl.dropboxusercontent.com/u/52916400/mobilelogo.PNGHi!
Please add following code to Quick CSS as well
@media only screen and (max-width: 480px) { strong.logo { margin-left: -65px!important; } .html_header_top.html_bottom_nav_header #header_main { position: absolute; width: 100%; } .responsive #main { padding-top: 95px !important; }}Best regards,
YigitSo close!
There’s a midway width that seems to look funny. When I turn my iphone horizontal, the header turns white (loses the transparency). The custom info should not show on this small size either.
The ipad and computer display is excellent – it just this one semi-small view that is left.
https://dl.dropboxusercontent.com/u/52916400/mobilescreenwhite.PNGHey!
Please change the code to following one
@media only screen and (max-width: 768px) { strong.logo { margin-left: -65px!important; } .html_header_top.html_bottom_nav_header #header_main { position: absolute; width: 100%; } .responsive #main { padding-top: 95px !important; }}Regards,
YigitYigit, thank you so much for your help. It’s very very close, but not working quite right. When you go to our website (see link above) you will see that the transparency turns to white if you make the browser narrow and the custom info continues to show.
What I would like to happen is this:
1) The transparency should always be there. No white header no matter what size. How do I never have a white header?
2) If the browser shrinks to the point where the menu changes to vertical mobile style, the custom_info should go away because it doesn’t fit with the logo at that point.Here is the current css:
@media only screen and (max-width: 480px) {
.logo img { opacity: 0; }
.logo a { background-image: url(http://dovshoneman.com/wp-content/uploads/Dov-Logo-Mobile-Small.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; }
strong.logo { margin-left: -65px!important; }
.html_header_top.html_bottom_nav_header #header_main { position: absolute; width: 100%; }
.responsive #main { padding-top: 95px !important; }
.custom_info { display: none; }
}@media only screen and (max-width: 768px) {
strong.logo { margin-left: -65px!important; }
.html_header_top.html_bottom_nav_header #header_main { position: absolute; width: 100%; }
.responsive #main { padding-top: 95px !important; }}Thank you!
Hey!
For background transparency, add the following to Quick CSS:
@media only screen and (min-width: 768px) and (max-width: 989px) { .responsive #top .header_bg { opacity: 0.3; } }To remove custom_info for mobile devices, add the following to Quick CSS:
@media only screen and (max-width:767px) { .custom_info{ display:none!important; } }Best regards,
ArvishHello I’ve tried using the same code CSS code – it works well on all pages except the home page – both the full size logo is loaded and a smaller is overlaid on it – any ideas how to fix that ?
@media only screen and (max-width: 480px) { .logo img { opacity: 0; } .logo a { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; }}rcgauto.staging.wpengine.com
Hi!
@rcgroup Please add following code to Quick CSS as well@media only screen and (max-width: 767px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 0; }}Cheers!
YigitHey
That sort of works – except now on the home page the logo disappears at certain width (when phone is held horizontally for example)
This seems to only affect the home page
Hi!
I would like to check the page but this link isn’t working, http://www.rcgauto.staging.wpengine.com. (hosted on WPengine)
Regards,
IsmaelSorry
Hi!
Try adding the following code to your CSS:
@media only screen and (max-width: 767px){ .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 1; } }Although the image is not being loaded. Are you using a plugin to protect your images? If so, disable it and check. Otherwise, check if the image URL is correct.
Regards,
ArvishHey!
Code works fine but background image you uploaded cannot be found. Please check your link once again.
Regards,
YigitHey!
Do you mind creating a temporary admin login and posting it here privately so we can look into it?
Cheers!
Yigit
- The topic ‘Using a different logo for mobile view?’ is closed to new replies.