Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#200245

I’d like to make the logo larger, spanning the t3-topbar and t3-header rows, and moving the contact info over a few columns, to accommodate this change.

Here’s a mock-up of what I mean:

But I wish all other behaviors to remain for when the screen resizes (the contact info collapses to two-rows, and the main menu changes to an off-canvas menu, etc).

Any help with the best approach to modifying the necessary files would be appreciated (and not just by me, I’m betting, as these smaller and smaller logo sizes becomes a trend with Joomlart designs). Our clients simply like to see their logos appear larger on their sites than these recent template designs allow.

Thanks in advance for any help you can provide.

Matt

---

Attachments:

1. 

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

#544538

Hi Matt . . . . Try This:

If you haven’t yet done so, create a new file called “custom.css” within file path –> /templates/ja_medicare/css/
Within that custom.css file, paste the following CSS rules:


.logo {
bottom: 30px;
left: -240px;
margin-left: 0;
text-align: left;
}

.main-container {
margin-left: 100px;
padding-left: 200px;
padding-right: 200px;
}

.t3-header {
padding-bottom: 5px;
padding-top: 5px;
}

You can/may do some further adjusting of the various properties, but you can see how the above CSS properties affect your display – close to what you indicated in your screenshot image.

What you need to do now is add your logo image in place of the template/text logo.

Hope That Helps 🙂

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#547201

Well, that was somewhat close… except that changing main-container also moves everything else over further down the page. I replaced your suggestion with the following and am starting to get closer, with the logo where I want it, etc… but I’m also wanting to bring the two lines a bit closer together, so they’re centered on the new logo.

Here’s what I have so far:

.logo {
bottom: 25px;
left: 0px;
margin-left: 0;
text-align: left;
}

ul.top-contact {
margin-left: 160px;
padding-left: 0px;
padding-right: 0px;
white-space: nowrap;
}

.t3-header {
padding-bottom: 5px;
padding-top: 5px;
}

I’d also like to re-arrange the items a bit for narrower media views, where the off-canvas menu is involved: 1) Move the search bar down. 2) Keep the large “Make An Appointment” button, instead of the smaller one.

(See attached image.)

Think you can help me out? I don’t have a lot of time, or I’d grind it out myself. Your assistance is much appreciated.

Matt

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#547283

Hi Matt,

You can try my suggestion:

+ Open file: /templates/ja_medicare/tpls/blocks/header.php then replace this code:

[PHP]<!– LOGO –>
<div class=”col-xs-10 col-sm-10 col-md-3 logo”>
<div class=”logo-<?php echo $logotype, ($logoimgsm ? ‘ logo-control’ : ”) ?>”>
<a href=”<?php echo JURI::base(true) ?>” title=”<?php echo strip_tags($sitename) ?>”>
<?php if($logotype == ‘image’): ?>
<img class=”logo-img” src=”<?php echo JURI::base(true) . ‘/’ . $logoimage ?>” alt=”<?php echo strip_tags($sitename) ?>” />
<?php endif ?>
<?php if($logoimgsm) : ?>
<img class=”logo-img-sm” src=”<?php echo JURI::base(true) . ‘/’ . $logoimgsm ?>” alt=”<?php echo strip_tags($sitename) ?>” />
<?php endif ?>
<span><?php echo $sitename ?></span>
<small class=”site-slogan”><?php echo $slogan ?></small>
</a>
</div>
</div>
<!– //LOGO –>

<!– MAIN NAVIGATION –>
<div id=”t3-mainnav” class=”col-xs-12 col-sm-12 col-md-9″>
<div class=”appointment-content <?php $this->_c(‘appointment’) ?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘appointment’) ?>” />
</div>

<nav class=”pull-right navbar navbar-default t3-mainnav”>

<?php if ($this->getParam(‘navigation_collapse_enable’)) : ?>
<div class=”t3-navbar-collapse navbar-collapse collapse”></div>
<?php endif ?>

<div class=”t3-navbar navbar-collapse collapse”>
<jdoc:include type=”<?php echo $this->getParam(‘navigation_type’, ‘megamenu’) ?>” name=”<?php echo $this->getParam(‘mm_type’, ‘mainmenu’) ?>” />
</div>

</nav>
</div>
<!– //MAIN NAVIGATION –>[/PHP]

[PHP]<!– LOGO –>
<div class=”col-xs-10 col-sm-7 col-md-3 logo”>
<div class=”logo-<?php echo $logotype, ($logoimgsm ? ‘ logo-control’ : ”) ?>”>
<a href=”<?php echo JURI::base(true) ?>” title=”<?php echo strip_tags($sitename) ?>”>
<?php if($logotype == ‘image’): ?>
<img class=”logo-img” src=”<?php echo JURI::base(true) . ‘/’ . $logoimage ?>” alt=”<?php echo strip_tags($sitename) ?>” />
<?php endif ?>
<?php if($logoimgsm) : ?>
<img class=”logo-img-sm” src=”<?php echo JURI::base(true) . ‘/’ . $logoimgsm ?>” alt=”<?php echo strip_tags($sitename) ?>” />
<?php endif ?>
<span><?php echo $sitename ?></span>
<small class=”site-slogan”><?php echo $slogan ?></small>
</a>
</div>
</div>
<!– //LOGO –>

<!– MAIN NAVIGATION –>
<div id=”t3-mainnav” class=”col-xs-12 col-sm-5 col-md-9″>
<div class=”appointment-content <?php $this->_c(‘appointment’) ?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘appointment’) ?>” />
</div>

<?php if ($this->countModules(‘head-search’)) : ?>
<!– HEAD SEARCH –>
<div class=”head-search <?php $this->_c(‘head-search’) ?>”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘head-search’) ?>” style=”raw” />
</div>
<!– //HEAD SEARCH –>
<?php endif ?>

<nav class=”pull-right navbar navbar-default t3-mainnav”>

<?php if ($this->getParam(‘navigation_collapse_enable’)) : ?>
<div class=”t3-navbar-collapse navbar-collapse collapse”></div>
<?php endif ?>

<div class=”t3-navbar navbar-collapse collapse”>
<jdoc:include type=”<?php echo $this->getParam(‘navigation_type’, ‘megamenu’) ?>” name=”<?php echo $this->getParam(‘mm_type’, ‘mainmenu’) ?>” />
</div>

</nav>
</div>
<!– //MAIN NAVIGATION –>
[/PHP]

+ Open file: /templates/ja_medicare/css/custom.css then add this rule:

#t3-header .head-search {
display: none;
}
@media (width: 768px){
.t3-topbar .head-search {
display: none;
}
#t3-header .head-search {
display: inline-block;
margin-right: 220px;
}
.appointment-content {
top: 0;
right: 0;
}
.appointment-content .btn {
border-radius: 20px;
}
.appointment-content .btn span {
display: inline-block;
}
}

Let me know if this helps

1 user says Thank You to Nazario A for this useful post

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#554018

First, let me thank @nazario A for his excellent suggestion. It wasn’t perfect, but it got me well underway towards getting the results I want. My header now looks perfect at resolutions greater than 980 wide.

However, it now is flawed at resolutions below 980px in width. To fix them, I need help with the following, because everything I’ve tried so far is having zero effect.

And apparently when I posted for help with them, my request (along with any answers already given) were lost in the 10-day loss you had. Very disappointing, but hopefully you’ll rush to help me, and all will be resolved.

Here is an image of what I’m after, along with a written description:

I’m trying to move the off-canvas menu button. I’ve tried using !important and even absolute positioning, but with zero luck. It won’t budge. I’m obviously doing something wrong. So how would you go about changing it’s location? Say moving it vertically 20 pixels down from where it is currently? If you can help me with that, I can likely sort out the exact positioning I want.

I’m also trying to move the appointment button down as well, below the horizontal rule, and make it the full-sized button, not the small version. (I’ve changed the layout a bit, and can now get away with using the full-sized button on smaller views (ie: < 980px).

Also, the head-search button… I’d like to remove it from smaller views entirely, but display:none isn’t working either.

These three things need a solution right away. I hope you’re scrambling to make up for lost time.

Matt

---

Attachments:

1. 

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

#554068

I’m not sure what did you change in off-canvas menu and how to re-size the width site with < 980px?. About the problem in smaller view on your site, because the big logo still there that’s why Make An Appointment and off-canvas were expanded.

Remove the icon in the screenshot, you can fix it with the solution below

Open templates/ja_medicare/css/custom.css file and add script below


@media (max-width: 767px) {
.head-search i {
display: none !important;
}
}

---

Attachments:

1. 

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#554084

That doesn’t seem to be working to remove the head-search div class. I tried something similar to that already. Please have another look. I’m using the default template, not some sub-style. So I can’t figure out why this isn’t working.

I’ll set up admin access for you and PM you the details.

Please also suggest a solution to lowering the off-canvas nav button and raising the appointment button, so they’re centered on the logo like my screen-capture explained.

Matt

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

#554175

I just helped you to fix the problem directly on your site

and below is the solution to do this

Open templates/ja_medicare/css/custom.css file with css script

@media screen and (max-width: 979px) {
.appointment-content {
top: -65px;
right: 20px;
}
.head-search i {
display: none !important;
}

.off-canvas-toggle {
margin-top: 20px;
}
}


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

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#554470

Alright! Now we’re getting somewhere.

I’ve gotten the header just how I want it, except for when the top-contact div disappears at widths less than 768px.

I really want the contact information visible at all times on the header, so I’d like it to move BELOW the logo and appointment button on smaller screens. (See mock-up.)

How best might I go about doing this? I have already altered the header.php, so that’s one option, but if there’s an easier CSS method, I’d prefer that.

Thanks for your continued help, guys. (This is the real reason I keep renewing my subscription to Joomlart, right here.)

Matt

---

Attachments:

1. 

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

#554491

I fixed the problem directly on your site with width less than 768px but very small like as 320px is impossible. Below is solution to do with width less than 768px

@media (min-width: 480px) and (max-width: 767px) {
.appointment-content i {
display: none !important;
}
.appointment-content .btn {
border-radius: 20px;
width: 180px;
}

.appointment-content .btn span {
display: inline-block !important;
}
}

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#554505

@ninja Lead,

I apparently didn’t make myself very clear in my previous post. I’m happy with how the appointment button functions currently. What I’m trying to do is make the contact info (top-contact div) appear BELOW the logo and appointment button once you get below 767px, something like what I included in the attached screenshot above. Sorry if I didn’t make myself more clear.

Please take another look at the screenshot, and see where the phone number and email address are below the rest of the header at the small width. Hopefully this clears up any confusion about what I’m trying to do.

Again, thanks for your continued help with this.

Matt

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

#554511

Mobile viewport is so small and you could not show all on that, but I enabled phone number and email address on your site with the solution below

+ Open templates/ja_medicare/tpls/blocks/topbar.php file

Find and change

<div class="col-sm-6 col-md-8 hidden-xs <?php $this->_c('topbar') ?>">
<jdoc:include type="modules" name="<?php $this->_p('topbar') ?>" />
</div>

To

<div class="col-sm-6 col-md-8 <?php $this->_c('topbar') ?>">
<jdoc:include type="modules" name="<?php $this->_p('topbar') ?>" />
</div>

+ Open templates/ja_medicare/css/custom.css file

Find and change

ul.top-contact {
margin-left: 20px;
padding-left: 0px;
padding-right: 0px;
white-space: nowrap !important;
margin-top: 100px;
display: inline-block !important;
}

To

ul.top-contact {
margin-left: 0px;
padding-left: 0px;
padding-right: 0px;
white-space: nowrap !important;
display: inline-block !important;
padding-top: 120px;
position: absolute;
}

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

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#554784

Hey… @ninja Lead

Thanks for everything you’ve done. I’ve *finally* got it working in the desired fashion — though I had to end up moving the contact info above the logo, rather than below (and I think it’s better there on small layouts anyway, since that’s what people are going to want most on a smartphone) — and everything APPEARS to be working as desired (at least in the single browser I’ve tested so far). Your help has been exemplary and so very appreciated.

If there’s any way I can praise your efforts (and those of others whom have helped on this thread) to the Joomlart bosses, I would be happy to do so. Please let me know if this is possible.

That said, there is but one final glitch with my site’s header layout now. (I know, it’s always something with me…)

Well technically two things, but I believe they’re caused by the same problem.

I’d like the main menu to extend to the left under the contact info, rather than dropping under the appointment button. When there are only a few menu items, it looks fine. But when you add more than will fit between the appointment button and the contact info, it drops down a line and that’s bad.

Also, the e-mail address appears to be unclickable in many of the various widths. I believe this is again likely due to the columns alloted to each portion of the header layout (logo vs navigation?), and it’s cutting off the link’s clickability because it extends outside of the allowed column width.

This is just my guess as to what’s wrong, and I’m hoping there’s an easy fix. I was hoping maybe something using z-index or some such to ensure it doesn’t get something placed “on top” of it? *shrug*

One last time into the breach, my friend?

Matt

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

#554844

Hi Matt,

I’m happy to help you if it isn’t heavy customization. The above custom work will take time and you should hire a developer to carry out such work.

I have been trying to help you to do this but I’m not sure that I can help you to work perfect anything because I’m very busy and didn’t have time to do this.

I just fixed the the header on your site on mobile layouts with dimension 320 x 480

+ Portrait

+ Landscape

Let me know if it helps.

Regards

---

Attachments:

1. 
2. 

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

1. synapsis

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#554894

Thanks for everything you were able to help me with. Typically, I’m able to do some pretty great customizations to these templates without much help. This one really plagued me, and it’s because so many of the latest templates are coming with these dinky little logo spots — and while that might be less important to the designers, it’s very important to my clients.

My wish is that future templates will keep this in mind, so that I don’t have to do so much to modify them to make them useable.

You sir, have been phenomenal. Thanks for all you’ve done to help me with this issue. I was serious when I said I’d like to reward you in some way for your help. Any suggestions on how I might do this — clicking “thank you” hardly seems sufficient — would be welcome.

Matt

[Author]

Posts