Joomla Templates Club 406,261 posts

[zoralina Friend zoralinaJoin date: September 2014Posts: 26Downloads:0Uploads:5 Thanks: 5]

#201439

hello,
my logo is very wide and the navigation has many items, so my question, is it possible to set the logo above the navigation?
Then would be more space for the search, too.
Like this:

How would this work?
Thanks for your answer!

---

Attachments:

1. 

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

#550080

When I brought up your site, I only saw 4 main nav menu items.

Did you decide to go this route, or are you still wanting to adjust things as you indicate above?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#550117

Hi zoralina,

You will need to change a bit in PHP file of the header and main navigation blocks.

To make it short, you will move the search (which belongs to the mainnav block) to the header block (which contains the logo). Here is workaround:
– Go to file: roottemplatesja_merotplsblocksmainnav.php, copy and remove this block code:
[PHP]
<?php if ($this->countModules(‘head-search’)) : ?>
<!– HEAD SEARCH –>
<div class=”span4″>
<div class=”head-search”>
<jdoc:include type=”modules” name=”<?php $this->_p(‘head-search’) ?>” style=”raw” />
</div>
</div>
<!– //HEAD SEARCH –>
<?php endif ?>
[/PHP]

– Paste above code to underneath the block code of logo in the header file: roottemplatesja_merotplsblocksheader.php, it will look like this:


<!-- LOGO -->
<div class="span8">
<div class="logo logo-<?php echo $logotype ?>">
<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!-- //LOGO -->
<?php if ($this->countModules('head-search')) : ?>
<!-- HEAD SEARCH -->
<div class="span4">
<div class="head-search">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
</div>
<!-- //HEAD SEARCH -->
<?php endif ?>


I also attach these 2 files so that you can make a comparison.

Regards

---

Attachments:

1. header_mainnav_blocks.zip

[zoralina Friend zoralinaJoin date: September 2014Posts: 26Downloads:0Uploads:5 Thanks: 5]

#550134

@ TomC: I skipped several items, because it looks strange, but I need them.
@ Saguaros: thanks, your files are for ja_mero, does it also work with ja_brisk?

Thanks!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#550150

My bad. I thought that you’re using JA Mero.

With JA Brisk, you can open header block file: templatesja_brisktplsblocksheader.php and remove the block code of main navigation:
[PHP]
<div class=”ja-mainnav span8″>
<!– MAIN NAVIGATION –>
<div id=”t3-mainnav” class=”t3-mainnav”>
<div class=”navbar”>
<div class=”navbar-inner”>

<button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>

<div class=”nav-collapse collapse<?php echo $this->getParam(‘navigation_collapse_showsub’, 1) ? ‘ always-show’ : ” ?>”>
<?php if ($this->getParam(‘navigation_type’) == ‘megamenu’) : ?>
<?php $this->megamenu($this->getParam(‘mm_type’, ‘mainmenu’)) ?>
<?php else : ?>
<jdoc:include type=”modules” name=”<?php $this->_p(‘mainnav’) ?>” style=”raw” />
<?php endif ?>
</div>
</div>
</div>
</div>
<!– //MAIN NAVIGATION –>
</div>
[/PHP]

Then you need to include the mainnav block into layout you’re using on your site by opening each php file in: templatesja_brisktpls ‘default.php’ and ‘home.php’

Add this line of code: [PHP]<?php $this->loadBlock (‘mainnav’) ?>[/PHP]

Underneath this line: [PHP]<?php $this->loadBlock (‘header’) ?>[/PHP]

Regards,

[zoralina Friend zoralinaJoin date: September 2014Posts: 26Downloads:0Uploads:5 Thanks: 5]

#550160

this does not work correctly in mobile. The navigation is underneath the grey line and disappears in smartphones.
Look here:
http://www.responsinator.com/?url=http%3A%2F%2Fwp1080408.server-he.de%2Fmw2%2F

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#550310

When you customize / change the markup like above, you will need to add additional style for it. You can use media jQuery to add specific style for different screen resolution, here is a good reference you can follow: http://code-tricks.com/css-media-queries-for-common-devices/

[Author]

Posts