-
AuthorPosts
-
September 12, 2019 at 6:26 pm #1137629
Hi,
I’ve tried all the different examples but can’t seem to get my mobile header to fit or the logo inside it centered to make it visible. Any suggestions?
Thanks,
FrankSeptember 13, 2019 at 10:40 am #1137907Hey yes9310,
Credentials did not work for me. Could you please update the credentials?
Best regards,
VictoriaSeptember 13, 2019 at 3:19 pm #1138042Hi Victoria,
I’m not sure what you mean credentials? Do you mean login info? What I sent is correct. Please see below.
Thanks,
Frank- This reply was modified 5 years, 1 month ago by yes9310.
September 16, 2019 at 5:07 am #1138656Hi Frank,
Can you try adding this css code in Quick CSS, located in Enfold > General Styling:
@media only screen and (max-width:767px) { .responsive #top #wrap_all #header, .responsive #top .header_bg, .responsive #top #wrap_all .av-logo-container, .responsive #top #header_main .inner-container { height: 120px !important; } .responsive #top .header_bg { background-size: contain !important; } .responsive #top #header .logo { display: block !important; margin: -20px auto 0; height: 32px !important; width: 126px !important; } .responsive #top #header .logo img { max-height: 32px; } }
Best regards,
NikkoSeptember 16, 2019 at 9:47 am #1138728Thanks Nikko,
I tweaked your CSS some to make it a little better and it is centered now, but the top part of the header is still chopped off on mobile after trying different number values on all of the ones below. Can you take a look at it on the phone to see? Thanks.
@media only screen and (max-width:767px) {
.responsive #top #wrap_all #header,
.responsive #top .header_bg,
.responsive #top #wrap_all .av-logo-container,
.responsive #top #header_main .inner-container {
height: 100px !important;
}.responsive #top .header_bg {
background-size: contain !important;
}.responsive #top #header .logo {
display: block !important;
margin: -32px auto 0;
height: 32px !important;
width: 126px !important;
}.responsive #top #header .logo img {
max-height: 32px;
}
}September 16, 2019 at 2:01 pm #1138818Hi yes9310,
I think it becomes more complex using the background image you’re using right now.
Maybe having 2 background images, the first one (currently used) then the other one is specifically made for mobile.
then after that I think you’ll need to use background-repeat: no-repeat;
Hope this helps.Best regards,
NikkoSeptember 16, 2019 at 6:26 pm #1138887Thanks Nikko,
Where would I put a background image for that? I’m not seeing adding a background image for mobile in the Menu settings.Thanks,
FrankSeptember 18, 2019 at 4:33 am #1139316Hi Frank,
I apologize what I meant was add it here:
.responsive #top .header_bg { background-size: contain !important; }
so it’s like:
.responsive #top .header_bg { background-image: url(image_url_here); background-size: contain !important; background-repeat: no-repeat; }
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.