Joomla Templates Club 406,261 posts

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#195407

hello, i’m during customize JA Fixel and would need help with Logo changes. i read the thread http://www.joomlart.com/forums/topic/how-do-i-change-the-logo/ but it’s to confusing for me!

i use curent a custom.css with JA Slider Fix.

The Logo should showed centered on pc,tablet and mobile…i have attached a example logo.

thanks for your help

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#525127

Can you, perhaps, throw together a screenshot mockup of how you are wanting your logo to display?

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525131

<em>@TomC 414390 wrote:</em><blockquote>Can you, perhaps, throw together a screenshot mockup of how you are wanting your logo to display?</blockquote>

hello Tom, thanks for your help..see screenshots Desktop, Verrtical Mobile and Horizontal Mobile Position.

---

Attachments:

1. 
2. 
3. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#525133

When I resize my browser, I am seeing your current logo image at center screen (i.e. the triangle image).

Is this not what is supposed to be happening … or are YOU seeing something different?

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525135

<em>@TomC 414399 wrote:</em><blockquote>When I resize my browser, I am seeing your current logo image at center screen (i.e. the triangle image).

Is this not what is supposed to be happening … or are YOU seeing something different?</blockquote>

on my iPhone 5 (Safari Browser) is the Triangle Image not realy in the Center (middle) of Mega Menu. see my additional screenshots

---

Attachments:

1. 
2. 

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

#525178

This is the image you need to replace instead of the triangle logo /templates/ja_fixel/images/themes/blue/logo-light.png

1 user says Thank You to chavan for this useful post

1. regeneron

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#525234

@testcouch
To adjust the logo centered on pc, tablet and mobile, this step would help:

Create a new css file named: custom.css in templatesja_fixel css directory and add this CSS rules:

[PHP].logo.logo-image {
float: none;
margin: 0 auto !important;
border: none;
}

.logo-image .brand {
padding-left: 0 !important;
padding-right: 0 !important;
}[/PHP]

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525290

<em>@Chavan 414449 wrote:</em><blockquote>This is the image you need to replace instead of the triangle logo /templates/ja_fixel/images/themes/blue/logo-light.png</blockquote>

i have replaced the logo-light.png with my above logo but it does not fully showed!

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525291

<em>@Hayden A 414517 wrote:</em><blockquote>@testcouch
To adjust the logo centered on pc, tablet and mobile, this step would help:

Create a new css file named: custom.css in templatesja_fixel css directory and add this CSS rules:

[PHP].logo.logo-image {
float: none;
margin: 0 auto !important;
border: none;
}

.logo-image .brand {
padding-left: 0 !important;
padding-right: 0 !important;
}[/PHP]</blockquote>

logo is now also on Desktop in center!? i want it only on mobile devices in center position..see my screenshots from here:http://www.joomlart.com/forums/topic/ja-fixel-logo/#post-525131

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#525358

@testcouch: Please try solution below:

+ Open the templates/ja_fixel/css/themes/blue/template.css file

Change

.logo-image a {
background-image: url("../../../images/logo.png");
background-repeat: no-repeat;
background-size: auto 100%;
width: 38px;
height: 30px;
display: block;
}
.logo-image .brand {
padding: 13px 20px;
}
.logo-image {
overflow: hidden;
width: 60px;
height: 60px;
}

To:

.logo-image a {
background-image: url("../../../images/logo.png");
background-repeat: no-repeat;
background-size: auto 100%;
width: 150px;
height: 60px;
display: block;
}
.logo-image .brand {
padding: 0px 20px;
margin-left: 0px;
}
.logo-image {
overflow: hidden;
width: 150px;
height: 60px;
}

+ Open the templates/ja_fixel/css/custom.css file

Change

.logo.logo-image {
float: none;
margin: 0 auto !important;
border: none;
}

To

.logo.logo-image {
margin: 0 auto !important;
border: none;
}

Logo path: templates/ja_fixel/images/themes/blue/logo-light.png

Let me know if it helps.

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525456

@ninja Lead

many thanks for your help. i have added your changes in both css files and it works on iphone. 🙂 on desktop/pc i’m missing a vertical line and the distance to logo like on your demo. see screenshots

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#525601

Please try this additional tweak.

Open the templates/ja_fixel/css/themes/blue/template.css file

Change

html .t3-mainnav .logo {
border-color: #e7e7e7;
}

To

html .t3-mainnav .logo {
border-color: #e7e7e7;
border-right: solid 1px #e7e7e7;
}

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525627

@ninja Lead

i’v added your changes in templates/ja_fixel/css/themes/blue/template.css file and additional(red):

.t3-mainnav .navbar .nav {
margin: 0;
padding-left: 10px;
}

html .t3-mainnav .logo {
border-color: #e7e7e7;
border-right: solid 1px #e7e7e7;
padding-right: 28px;
}

it looks now good on pc but on iPhone i see now also the border next to center logo. border should only visible on pc/desktop! see screenshot

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#525735

Please try again with this workaround:

Open templates/ja_fixel/css/custom.css file and add this rule:

@media (max-width: 767px) {
html .t3-mainnav .logo {
border-right: 0px !important;
}
}
@media (max-width: 979px) {
html .t3-mainnav .logo {
border-right: 0px !important;
}
}

Let me know how it goes.

1 user says Thank You to Ninja Lead for this useful post

1. testcouch

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#525784

looks like it works now perfect on pc and iPhone 🙂 i will also check on iPad..Android Devices and so on..i’ll give you feedback. thanks again

[Author]

Posts