Move navbar to top of page?

[AKhan139]

Hi all! I'm working on a new site using Collection Builder and having a ton of trouble moving the navigation bar to the top of a page, as opposed to being below the main banner image. I've been able to generate a sort of mini-homepage that looks the way i want with the navbar on the top of the page, but this whole thing exists below the current banner image and navigation bar and I can't figure out how to get rid of it/move it below the navigation bar. Any insight is appreciated!

[evanwill]

@AKhan139 to move around the navbar you will probably have to customize "_layouts/default.html".

Take a look at "_layouts/default.html". This is the base layout for ALL pages in your site, bringing the theme elements (like the header, nav, and footer) in around the content of the individual page. In the middle of this file you will see:

{% include collection-banner.html %}
{% include collection-nav.html %}
<main id="maincontent" role="main" class="flex-shrink-0">
  {{ content }}
</main>
{% include footer.html %}

If you want the navbar at the top, and do NOT want a banner style header, just delete the line {% include collection-banner.html %}. This is a pretty common customization--to polish it off, you may want to change "Home" in config-nav.csv to the title of your site or tweak the navbar set up in "_includes/collection-nav.html" to have a navbar-brand element.

Alternatively, if you want to keep the standard banner style header + nav on most pages, but want to tweak the Home page only, you can customize "_includes/collection-banner.html". If you take a look at the file, you will see that there is an If statement in Liquid, so that the standard "home-infographic" layout has a different banner (i.e. the big feature image) than the rest of the pages. You can tweak the html in that section to change what the banner looks like on the Home page only, leaving the other pages with the standard banner+navbar.

[AKhan139]

Thank you @evanwill ! Really appreciate the quick response! I missed the default.html customization.