Joomla Templates Club 406,261 posts

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#194776

Hi,

Is it possible to make the logo appear in the center position when watching the theme in small layout only. and still left posisitoned when the main menu is at its normal function.

Found this in header-home.php: <div class=”pull-left logo”>
However I can not seem to find any settings for mobile view.

cheers and thanks.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522694

You can adjust it using the css. Go to your theme and template.css (or add custom.css) around line 5351

@media (max-width: 768px)
.t3-header .pull-left {

• position: static;
• margin-left: 270px; <add this line and adjust as needed

}

Hope that helps!

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#522703

thanks swissa,

but not exactly, I have attatched a picture that explains what I am trying to achieve. 🙂

cheers.

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522706

That is what the code achieves on my machine so maybe I’m not understanding what you want. The 270px is not fixed – you’ll need to adjust to your wish.

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#522708

looks like this in my theme.

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522710

What are the two menüs?

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#522711

the main menu and off canvas menu.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#522717

To do that you’re going to have to change some php. Happy to do that?

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#523222

<em>@iaassens 411264 wrote:</em><blockquote>Hi,

Is it possible to make the logo appear in the center position when watching the theme in small layout only. and still left posisitoned when the main menu is at its normal function.

Found this in header-home.php: <div class=”pull-left logo”>
However I can not seem to find any settings for mobile view.

cheers and thanks.</blockquote>

You still want to do this or can I throw my notes away? 😀

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#523229

Hi swissa,

Sure, I still want to do this yes. However my site are still in development fase and is only hosted on my localhost.
So not sure how to proceed from here.

cheers,

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#523231

Let me post the changes you need to do, I can clear a sticky on my desktop and you can bookmark this thread for when you go live (or use akeeba to transfer to a live site). Ok?

Before we start, PLEASE do a backup! Even if you are using a local site to work this.

Also take a copy of the file we are going to change and save it somewhere safe. If it all goes ‘Pete Tong’ we can get it back to pre-hacking stage quickly!!

Go to templates/ja_appolio/tpls/blocks/header-home.php

Find this code @ circa line 30

<!-- LOGO --> <div class="pull-left logo">
<div class="logo-<?php echo $logotype ?>">
<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 ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-xs"><?php echo $slogan ?></small>
</div>
</div>
<!-- //LOGO -->

cut it and move it to below this code (it is currently before it)

<?php if ($this->getParam('addon_offcanvas_enable')):
$this->loadBlock ('off-canvas');
endif;
?>
<div class="container t3-mainnav">
<div class="container">
<?php if($this->getParam('mm_type', 'mainmenu') != 'none') : ?>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<?php if ($this->getParam('navigation_collapse_enable', 1) && $this->getParam('responsive', 1)) : ?>
<?php $this->addScript(T3_URL.'/js/nav-collapse.js'); ?>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".t3-navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<?php endif ?>
</div>

and paste it back in.

What we’ve just done is move the logo from before the off canvas menü to after it. All of about 20 lines but makes the difference!

Now take the css I gave you earlier and let’s adjust to fit your idea.

@media (max-width: 768px)
.t3-header .pull-left {
position: static;
float: right !important;
margin-right: 120px;
}


adjust and play with the 120px margin as necessary.

Hope that nails it; if it does (and it does for me) copy this and keep it safe. If you upgrade the template you’ll need to redo the php change.

1 user says Thank You to swissa for this useful post

1. iaassens

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#523356

Hi swissa,

Thanks, 🙂 that did put the logo between the two menus, however it is not really centered with a margin-right styling.
Looking at the page on different screensizes positions the logo different places, never centered.

But you have still saved my day with the php tweaking, so thanks. 🙂

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#523357

<em>@iaassens 412127 wrote:</em><blockquote>Hi swissa,

Thanks, 🙂 that did put the logo between the two menus, however it is not really centered with a margin-right styling.
Looking at the page on different screensizes positions the logo different places, never centered.

But you have still saved my day with the php tweaking, so thanks. :)</blockquote>

Just add different media queries for each size. You have 768px now, you can copy this for 991px etc etc etc and adjust as needed.

[iaassens Friend iaassensJoin date: December 2013Posts: 121Downloads:22Uploads:18 Thanks: 34 Thanked: 2 times in 1 posts]

#523384

oh great, thanks again. will try to mess around with this a bit then 🙂

[Author]

Posts