Joomla Templates Club 406,261 posts

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

#533329

That’s kind of how I had it set up for you with my previous CSS suggestions below:


.logo-image .logo-img {
height: 120px;
margin-left: -110px;
width: 350px;
}

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


. . . . except, perhaps, for repositioning the main-navigation menu a bit so that it is more centered (vertically) within the header section.

Basically, what you can do is play around with the various CSS properties (height/width/margin) until you arrive at the result you’re most happy with. Again, I recommend utilizing an online web development tool such as FIREBUG to do this – as you can play around with the CSS in a real-time (visual) setting – while not affecting your actual site CSS files – until you arrive at the settings you like best. THEN you can modify and save your actual site CSS accordingly.

Make Sense?

🙂

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533331

Thanks

I have changes the H and W

but no matter what I do, the logo looks squashed and distorted and I don’t understand why. See screen shot and website.

---

Attachments:

1. 

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

#533333

Do me a favor . . . temporarily set “Optimzie CSS” to “No/Off” within your Template Manager–General settings.

I will then work on this a bit more for you.

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533334

thanks – done

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

#533338

You have two of the same CSS rule within your custom.css that, I believe, are conflicting with one another:


.logo-image .logo-img {
height: 200px;
margin-left: -90px;
width: 289px;
}

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

You only need one CSS rule for “.logo-image” – modify so that you only have the following within your custom.css


.logo-image .logo-img {
height: 200px;
margin-left: -90px;
width: 289px;


I can/will then work on it further for you.

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533340

Yes done that, but seems like the menu area doesn’t grow bigger which is why it looks squashed?

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

#533342

Okay, I found what is messing things up . . . . .

Look within file path –> /templates/ja_biz/css/themes/sacredknowledge/template.css
at line 3715 . . . delete the following CSS rule:


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

This is what has been conflicting/messing up the CSS you have within your custom.css file.

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533343

Thanks, now it looks scary lol

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

#533344

<em>@ahsanashraf 424897 wrote:</em><blockquote>Thanks, now it looks scary lol</blockquote>

NOW, modify/add the following CSS within your custom.css as follows (as a suggestion) . .


.logo-image .logo-img {
height: 150px;
margin-left: -90px;
width: 350px;
}

.logo-image .logo-img {
height: 150px;
margin-left: -90px;
width: 350px;
}

.t3-mainnav .t3-navbar {
margin-top: 50px;
}

2 users say Thank You to TomC for this useful post

1. ahsanashraf
2. kaj

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533346

Tom, this looks much better, thanks for your help. Can I do something about the impact this has had on viewing the logo on mobile devices?

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

#533347

<em>@ahsanashraf 424900 wrote:</em><blockquote>Tom, this looks much better, thanks for your help. Can I do something about the impact this has had on viewing the logo on mobile devices?</blockquote>

Ugh, I’m not as astute when it comes to mobile device display . . . for this, I am going to request some assistance from one of my Support Team friends. I am certain he will chime in soon (within the next day or so). Hold tight, more help is on the way . . .

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533349

You have been a great help, lots of prayers for you. Wishing you all the best.

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

#534483

@ahsanashraf: My solution below will help you to solve the problem on logo site

+ Open templates/ja_biz/css/custom.css file add new rule

@media (max-width: 767px) {
.logo-image .logo-img {
max-height: 50px !important;
}
} @media screen and (min-width: 768px) {
.logo {
top: 1px;
}
}


+ Open templates/ja_biz/css/themes/sacredknowledge/template.css file

Change

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

To

.logo-image .logo-img {
max-height: 80px;
}


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

1. ahsanashraf

[Author]

Posts