How to modify a HUGO theme to have only top menu items without extra box that take too much place?

Question

i'm using Elate Hugo theme https://github.com/saey55/hugo-elate-theme/ and I'd like to add a custom section where people may get if they click somewhere because the theme is a one page long scroll theme i look to transform to something more complete.

I'm trying to modify this page in /section/page.html with some customizations but it's not working and i still see that blue space that i don't need ( i need only to see the menu items, folowed by my custom content)

if you found a way to fix that it may help others too. thank you in advance,

here are the nav.html ( partials) :

    <header role="banner" id="fh5co-header">
    <div class="container">
        <!-- <div class="row"> -->
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <!-- Mobile Toggle Menu Button -->
                <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
                <a class="navbar-brand" href="index.html">{{ with .Site.Params.navigation.brand }}{{ . | markdownify }}{{ end }}</a> 
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">

                {{ range .Site.Menus.prepend }}
                    <li><a class="external" href="{{ .URL }}"><span>{{ .Name | markdownify }}</span></a></li>
                {{ end }}

                <li class="active"><a href="#" data-nav-section="home"><span>{{ with .Site.Params.navigation.home }}{{ . | markdownify }}{{ end }}</span></a></li>
                
                {{ if .Site.Params.work.enable }}
                <li><a href="#" data-nav-section="work"><span>{{ with .Site.Params.navigation.work }}{{ . | markdownify }}{{ end }}</span></a></li> 
                {{ end }}

                {{ if .Site.Params.testimonials.enable }}
                <li><a href="#" data-nav-section="testimonials"><span>{{ with .Site.Params.navigation.testimonials }}{{ . | markdownify }}{{ end }}</span></a></li> 
                {{ end }}

                {{ if .Site.Params.services.enable }}
                <li><a href="#" data-nav-section="services"><span>{{ with .Site.Params.navigation.services }}{{ . | markdownify }}{{ end }}</span></a></li> 
                {{ end }}

                {{ if .Site.Params.about.enable }}
                <li><a href="#" data-nav-section="about"><span>{{ with .Site.Params.navigation.about }}{{ . | markdownify }}{{ end }}</span></a></li> 
                {{ end }}

                {{ if .Site.Params.contact.enable }}
                <li><a href="#" data-nav-section="contact"><span>{{ with .Site.Params.navigation.contact }}{{ . | markdownify }}{{ end }}</span></a></li> 
                {{ end }}

                {{ range .Site.Menus.postpend }}
                    <li><a class="external" href="{{ .URL }}"><span>{{ .Name | markdownify }}</span></a></li>
                {{ end }}
            </ul>
        </div>
    </nav>
    <!-- </div> -->
</div>

and the hero.html also a partial ( sort of banner with text i want to remove in my custom page)

    <section id="fh5co-home" data-section="home" style="background-image: url(images/full_image_2.jpg);" data-stellar-background-ratio="0.5">
    <div class="gradient"></div>
    <div class="container">
        <div class="text-wrap">
            <div class="text-inner">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <h1 class="to-animate">{{ with .Site.Params.hero.title }}{{ . | markdownify }}{{ end }}</h1>
                        <h2 class="to-animate">{{ with .Site.Params.hero.subtitle }}{{ . | markdownify }}{{ end }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slant"></div>
</section>