Customizing Protostar - Empty space in Joomla Protostar Template

Question

OK, so I am brand new to Joomla, figuring it out as I go along. I mean, that is what Joomla is for, being able to do it yourself.

So I have been sitting for two days at an end, trying to get that irritating waste of space in my Protostar template gone. to be exact, there is an empty space of about 1 inch above the Position-1 module in the Template.

Attached is an image, indicating the red highlighted area I want gone. I looked up forums, posts and all, but none of the info there help me

Answer 1

1. Looking at your CSS

To fully remove the space that is above your menu:

.body .container has a border of 1px

.header has a margin-bottom of 10px

.navigation has a padding of 5px for top/bottom.

.navbar has a margin-bottom of 18px;

These need to be changed/overwritten. So something like this, in your Custom Css file could work:

.body .container {border: 0;}
.header {margin-bottom: 0;}
.navigation {padding-top: 0;}
.navbar {margin-bottom: 0;}

---

Note:
If you want to give more specificity therefore even higher priority for your custom rules, you can add the .site selector before the others. For example the above rules would end up like so:

.site .body .container {border: 0;}
.site .header {margin-bottom: 0;}
/*.... and so on....*/

---

Answer Updates

Modifying Protostar Template - Best Practices

I forgot to mention that it looks like you are modifying directly the core Protostar template. Do note that any changes you do on its core files are under the potential risk of getting overwritten (lost) after a future update of Joomla.

There are two main options on how to do this, depending on the level of customization needed:

1. Adding Custom CSS

The Protostar template CSS can be modified directly in the Template Manager. But the issue with modifying core files is that they may be overwritten by an update. So to avoid to add to CSS customisations again and again, the solution is to add a custom css file. (This is implemented since Joomla 3.5. All it takes is to create a new file named user.css and placed inside the css folder of the protostar template. There we can add our own custom css rules. Here is a more detailed guide on how to do this through Joomla backend:

• Customizing the Protostar Template - Custom CSS

2: Cloning Protostar

If you want to go a step further and customize deeper the Protostar template, changing it's layout and html, you can copy/clone it and build your own template upon it.

This can be done easily through Joomla Template Manager interface. Following the links below you can find on how to do this:

• Best way to override the index.php file from a joomla template

• Joomla.org Docs: Modifying a Joomla Template

Answer 2

Ok, you don't load any module to the position-0, right?

This is the header part in the index.php:

<header class="header" role="banner">
        <div class="header-inner clearfix">
            <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                <?php echo $logo; ?>
                <?php if ($this->params->get('sitedescription')) : ?>
                    <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                <?php endif; ?>
            </a>
            <div class="header-search pull-right">
                <jdoc:include type="modules" name="position-0" style="none" />
            </div>
        </div>
</header>

It's possible that one of the elements has a height, padding or margin. You can check that very easy by using dev tools (F12 or right click -> check element).

If you don't need the header section here, you can excluded it with following changes:

<?php if ($this->countModules('position-0')) : ?>   
<header class="header" role="banner">
            <div class="header-inner clearfix">
                <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                    <?php echo $logo; ?>
                    <?php if ($this->params->get('sitedescription')) : ?>
                        <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                    <?php endif; ?>
                </a>
                <div class="header-search pull-right">
                    <jdoc:include type="modules" name="position-0" style="none" />
                </div>
            </div>
    </header>
<?php endif; ?>

This with check if there is a module activated for position-0, if not skip this part otherwise it will output the header with the module position.

Answer 3

So there are 3 problems:

1. As @Dennis Heiden mentioned, you need to add a PHP if statement around you <header> as it's still displaying in the DOM. So follow the instructions on his answer first.
2. Your navbar (.navigation) has a 5px top padding which is adding a little more space at the top
3. The last issue is coming from the following code:

```

ul.maximenuck {
    clear: both;
}

```

which as you can imagine, is coming from the maximenu extension you're using which I would whole heartedly never recommend using.

Answer 4

There is a free plugin that significantly improves Protostar display and functions without editing the core files or losing the changes when Joomla updates. In fact a user can create many custom css themes and display templates and select them from an auto detect list.

It is also developer friendly so installable themes can be distributed. Additional form fields can be added to the template parameters as desired, just by adding a custom file with unique name as theme_name.xml and output the values via a custom file named theme_name.php. The package is then installed normally via Joomla's extension installer. It's great for creativity and expand-ability. It makes possible to do with Protostar, all that the commercial templates do. http://protostar.websitedons.net/