Joomla Templates Club 406,261 posts

[scolmac Friend scolmacJoin date: May 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#196160

I am working on the JA Brisk template. I need to be able to edit the logo size on the mobile phone template but leave the standard template as it is. Is this possible?

Kind Regards

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#528165

I suggest to make the logo as image in the template manager instead of the existing background image. so this would fix the responsive logo

[scolmac Friend scolmacJoin date: May 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#528168

Hi Chavan

Thanks for your response.

The logo setting is already set as image.

I think you may have misunderstood my request. We are happy with how the logo appears on the main template. We have altered the default size and made it larger in the css. However we need the logo to look smaller when viewed on a mobile phone only. Is there anywhere I can edit the mobile phone logo size?

Thanks

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#528173

I understood in a perfect way. And I have provided a suggestion to fix that issue.

Again

you have added the images as a background in css. Instead you need to upload the images in the template Manager.

If you still can’t understand please send me the admin details will fix it for you.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#528708

Thanks for the details.

Gone to this File: /templates/ja_brisk/css/custom.css

I have Added this code

@media screen and (max-width: 1024px){

.logo-image img {
height: 40px;
}

.logo-image a{
background: none !important;
height:40px !important;
width:auto !important;
}

}
@media screen and (max-width: 400px){

.head-search .input, .head-search .input:focus{
width: 81% !important;
margin: 0 10px;

}

.ja-header{
height: 100px;
}

.container.ja-mainbody{
margin-top:100px !important;
}

.ja-header .ja-search {

float: none !important;
position: relative !important;
right: 0 !important;
width: 100% !important;
}

.ja-header .ja-search .head-search{
margin-top:5px !important;
}

}

Also made some changes on /templates/ja_brisk/tpls/blocks/header.php

Check on your mobile, tablet and confirm me

1 user says Thank You to chavan for this useful post

1. scolmac

[scolmac Friend scolmacJoin date: May 2011Posts: 5Downloads:0Uploads:0 Thanks: 2]

#529084

Thanks very much Chavan!

It looks perfect.

[webcode Friend webcodeJoin date: June 2011Posts: 26Downloads:0Uploads:2 Thanks: 4 Thanked: 2 times in 1 posts]

#535834

On my site the mobile logo disappeared after updates.
This is what i have in custom.css

/* mobile */ @media (max-width: 767px) {
.logo-image a {
width: 226px;
height: 50px;
background-image: url(../images/logo_smartphone.png);
}
.t3-mainnav {
background: none;
float: left;
}

.container.ja-mainbody {
padding-top: 110px;
}
.ja-content.span8.pull-right{
margin-right: 0px;

}
}

someone please help
best regads

i changed <div class=”ja-logo span2″>
to <div class=”ja-logo span4″>
i have mobil logo now, but the mobil menu is not showing

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#535872

@webcode

can you please post your site url

[Author]

Posts