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:
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: