How do i get a responsive Header Image above the nav bar in Purity III - Corporate?

Question

I am building a website for a project i have to do and i am stuck on that problem. Good guy Joomlart hides every answer behind a paywall, so i am pretty alone. ( i didn't realize the non existent community help only after starting with purity iii)

So i just want to add a position over the navbar and make it responsive so i can add a header image in there.

I use the Purity III - Corporate Template.

How do i do it? I am a bloody rookie :/

Answer 1

First add your new position in /templates/purity_iii/templateDetails.xml, inside the positions block:

<positions>
    <position>new-position</position>
</position>

Now add your position in one of this two options:

• /templates/purity_iii/tpls/corporate.php
• /templates/purity_iii/tpls/blocks/header.php

For the second option add this code above the main navigation:

<section class="new-position-css">
    <jdoc:include type="modules" name="<?php $this->_p('new-position') ?>" style="none" />
</section> 

From here add your custom module, for example a Custom HTML module with your image.

---

Note: By default the navigation is fixed at the top, change this code:

<!-- MAIN NAVIGATION -->
<header id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav">

To this:

<!-- MAIN NAVIGATION -->
<header id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">

---

As a final step, you can use Firebug for inspect the source code of your page in the browser, for example, add this rules in your main or custom.css file.

body {
    padding-top: 0;
}
.new-position-css p {
    margin-bottom: 0;
}
.new-position-css img {
    width: 100%;
}

To complement, find more info here: Purity III Docs. & T3 Docs.

Regards.