All themes

Sandbox Jekyll documentation

Navbar

Copy any custom block snippet below and paste it on your page to build your website easily.

section header.image-wrapper:not(.mobile) { background-attachment: scroll !important; } section header.image-wrapper, section .navbar { z-index: 2 !important; } section .navbar .hamburger, section .navbar [data-bs-toggle=“offcanvas”], section .navbar .btn { pointer-events: none; } section .navbar .container { padding-left: 0.75rem; padding-right: 0.75rem; }

Example 1

{% include components/navbar/navbar.html 
  classList="navbar-light navbar-light"
  logoAlt=true
  otherClassList="w-100 d-flex ms-auto"
  otherLanguageSelect=true
  otherInfo=true
%}

Example 2


{% include components/navbar/navbar.html 
  wrapperClass="bg-dark"
  classList="center-nav transparent navbar-dark"
  logoBoth=true
  logoAlt="logo-dark"
  otherClassList="w-100 d-flex ms-auto"
  otherSearch=true
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-primary rounded"
  otherBtnText="Contact"
  otherBtnLink="/contact/"
%}

Example 3


{% include components/navbar/navbar.html 
  wrapperClass=""
  classList="center-nav transparent navbar-light navbar-bg-light"
  centerNav=true
  logoAlt=true
  otherClassList="w-100 d-flex ms-auto"
  otherSocial=true
%}

Example 4

{% include components/navbar/navbar.html 
  wrapperClass=""
  classList="center-nav navbar-dark navbar-bg-dark"
  centerNav=true
  logoLight=true
  otherClassList="w-100 d-flex ms-auto"
  otherLanguageSelect=true
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-primary rounded-pill"
  otherBtnText="Contact"
  otherBtnLink="/contact/"
%}

Example 5


{% include components/navbar/navbar-fancy.html 
  wrapperClass=""
  classList="fancy navbar-light navbar-bg-light caret-none"
  centerNav=true
  fancy=true
  logoAlt=true
  otherClassList="w-100 d-flex ms-auto"
  otherSocial=true
%}

Example 6


  {% include components/navbar/navbar.html 
    topAlert=true
    wrapperClass="bg-soft-primary"
    classList="classic transparent navbar-light"
    logoAlt="logo-dark"
    otherClassList="ms-lg-4"
    otherBtn=true
    otherBtnClassList="btn btn-sm btn-primary rounded"
    otherBtnText="Free Trial"
    otherBtnLink="#"
%}

Example 7


{% include components/navbar/navbar.html 
  topAlert=false
  wrapperClass="bg-soft-primary"
  classList="classic transparent navbar-dark"
  logoBoth=true
  logoAlt="logo-dark"
  otherClassList="ms-lg-4"
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-white rounded-pill"
  otherBtnText="Free Trial"
  otherBtnLink="#"
  
%}

Example 8


{% include components/navbar/navbar.html 
  topAlert=false
  wrapperClass="bg-soft-primary"
  classList="classic navbar-light navbar-bg-light"
  logoAlt="logo-dark"
  otherClassList="ms-lg-4"
  otherBtn=true
  otherBtnClassList="btn btn-sm btn-primary rounded-pill"
  otherBtnText="Free Trial"
  otherBtnLink="#"
  
%}

Example 9


  {% include components/navbar/navbar.html 
    topAlert=false
    classList="classic navbar-dark navbar-bg-dark"
    logoBoth=true
    logoAlt="logo-dark"
    otherClassList="ms-lg-4"
    otherBtn=true
    otherBtnClassList="btn btn-sm btn-primary rounded-pill"
    otherBtnText="Free Trial"
    otherBtnLink="#"
    
%}

Example 10


  {% include components/navbar/navbar-fancy.html 
    wrapperClass=""
    classList="fancy navbar-light navbar-bg-light"
    fancy=true
    logoAlt="logo-light"
    otherClassList=" d-flex ms-auto"
    otherBtn=true
    otherBtnClassList="btn btn-sm btn-primary rounded-pill"
    otherBtnText="Free Trial"
    otherBtnLink="#"
   
%}

Example 11


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo  navbar-dark navbar-bg-dark"
    logoBoth=true
    logoAlt="logo-dark"
%}

Example 12


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo transparent navbar-dark"
    fancy=false
    logoBoth=true
    logoLight=true
%}

Example 13


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo navbar-light navbar-bg-light"
    fancy=false
    logoBoth=true
    logoAlt="logo-dark"
%}

Example 14


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo transparent navbar-dark"
    fancy=false
    logoBoth=true
    logoLight=true
%}

Example 15


  {% include components/navbar/navbar-center-logo.html 
    classList="center-logo fancy navbar-light navbar-bg-light"
    fancy=true
    logoBoth=true
    logoAlt="logo-dark"
   %}

Example 16


  {% include components/navbar/navbar-extended.html 
    otherLanguageSelect=true    
    %}

Example 17


      {% include components/navbar/navbar-extended-alt.html 
        classList="extended extended-alt navbar-light navbar-bg-light"
        onePageDemo=true
        logoAlt="logo-dark"
        otherSearch=true
        otherInfo=true
    %}

Sign In

Please enter your credentials to continue.

Email

Password

Sign In

Forgot your password?

Don’t have an account? Sign up

or

Create Account

Create your account to get started.

Name

Email

Password

Confirm Password

Create Account

Already have an account? Sign in

or