My first Navigation block for the Mobirise Website builder.

Project Download:

https://www.dropbox.com/s/ah8qtp4zhqzs2b6/project.mobirise?dl=1

HTML Code Snippet:

<section class="menu" group="Menu" plugins="DropDown, TouchSwipe" always-top global once="menu" not-draggable position-absolute>

    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="checkbox" title="Show Logo" name="showLogo">
        <input type="range" title="Logo Size" inline name="logoSize" min="3.8" max="8" step="0.1" value="3.8" condition="showLogo">
        <input type="checkbox" title="Show Brand Name" name="showBrand" checked>
        <input type="checkbox" title="Show Menu Items" name="showItems" checked>
        <input type="color" title="Items Hover Color" name="itemsHoverColor" value="#c1c1c1" condition="showItems">
        <input type="checkbox" title="Show Button(s)" name="showButtons">
        <input type="checkbox" title="Sticky" name="sticky" checked>
        <input type="checkbox" title="Collapsed" name="collapsed">
        <input type="checkbox" title="Transparent" name="transparent" checked>
        <input type="color" title="Hamburger Color" name="hamburgerColor" value="#ffffff">
        <input type="color" title="Background Color" name="menuBgColor" value="#ffffff">
        <!-- End block parameters -->
    </mbr-parameters>

    <nav class="navbar navbar-expand beta-menu navbar-dropdown align-items-center" mbr-class="{'navbar-fixed-top': sticky,
        'navbar-toggleable-sm': !collapsed,
        'collapsed': collapsed,
        'bg-color transparent': transparent}">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <div class="menu-logo">
            <div class="navbar-brand">
                <span mbr-if="showLogo" class="navbar-logo">
                    <a href="https://freedesignblocks.com/">
                         <img src="#" alt="" mbr-style="{'height': logoSize + 'rem'}">
                    </a>
                </span>
                <span mbr-if="showBrand" mbr-buttons mbr-theme-style="display-4" class="navbar-caption-wrap" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove"><a class="navbar-caption text-white" data-app-selector=".navbar-caption" href="https://freedesignblocks.com/" data-app-placeholder="Type Text">
                        Sjögatan</a></span>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul mbr-if="showItems" mbr-menu class="navbar-nav nav-dropdown" mbr-theme-style="display-4" mbr-class="{'nav-right': !showButtons,'navbar-nav-top-padding': isPublish && !showBrand && !showLogo}">
                <li class="nav-item">
                    <a class="nav-link link text-white" href="#top" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-white" href="index.html#header2-7" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">

                        Features</a>
                </li>
                <li class="nav-item"><a class="nav-link link text-white" href="index.html#features2-i" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">

                        About</a></li>
                <li class="nav-item"><a class="nav-link link text-white" href="index.html#progress-bars2-p" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">

                        Solutions</a></li>
                <li class="nav-item"><a class="nav-link link text-white" href="index.html#features2-r" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">

                        Team</a></li>
                <li class="nav-item"><a class="nav-link link text-white" href="index.html#form1-k" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">

                        Contact</a></li>
            </ul>
            <div mbr-if="showButtons" mbr-buttons mbr-theme-style="display-4" class="navbar-buttons mbr-section-btn">
                <a class="btn btn-sm btn-primary" href="https://mobirise.com">
                    <span class="mbri-save mbr-iconfont mbr-iconfont-btn " data-app-selector=".mbr-iconfont-btn"></span> Try It Now!
                </a>
            </div>
        </div>
    </nav>

</section>

CSS Code Snippet:

.navbar {
  padding: .5rem 0;
  background: @menuBgColor;
  transition: none;
  min-height: 77px;
}
.navbar-dropdown.bg-color.transparent.opened {
  background: @menuBgColor;
}
a {
  font-style: normal;
  font-size: 1rem;
  font-weight: 300;
}
.navbar-short {
  border-bottom: solid 1px #EEE;
}
.navbar-short a {
  color: #141414 !important;
}
.navbar-short .navbar-toggler .hamburger span {
  background: #141414;
}
.opened .navbar-toggler .hamburger span {
  background: #141414;
}
.opened a {
  color: black !important;
}
.nav-item {
  & span {
    padding-right: 0.4em;
    line-height: 0.5em;
    vertical-align: text-bottom;
    position: relative;
    text-decoration: none;
  }
  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0 !important;
    margin: 0rem .65rem !important;
  }
}
.nav-item:focus, .nav-link:focus {
  outline: none;
}
.btn {
  padding: 0.4rem 1.5rem;
  .mbr-iconfont {
    font-size: 1.6rem;
  }
  display: inline-flex;
  align-items: center;
}
.menu-logo {
  margin-right: auto;
  .navbar-brand {
    display: flex;
    margin-left: 5rem;
    padding: 0;
    transition: padding .2s;
    min-height: 3.8rem;
    align-items: center;
    display .navbar-caption-wrap {
      display: -webkit-flex;
      -webkit-align-items: center;
      align-items: center;
      word-break: break-word;
      min-width: 7rem;
      margin: .3rem 0;
      .navbar-caption {
        line-height: 1.2rem !important;
        padding-right: 2rem;
      }
    }
    .navbar-logo {
      font-size: 4rem;
      transition: font-size 0.25s;
      & img {
        display: flex;
      }
      .mbr-iconfont {
        transition: font-size 0.25s;
      }
    }
  }
}
.navbar-toggleable-sm .navbar-collapse {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  padding-right: 5rem;
  width: auto;
  .navbar-nav {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    padding-left: 0;
    .nav-item {
      -webkit-align-self: center;
      align-self: center;
    }
  }
  .navbar-buttons {
    padding-left: 0;
    padding-bottom: 0;
  }
}
.dropdown {
  .dropdown-menu {
    background: @menuBgColor;
    display: none;
    position: absolute;
    min-width: 5rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    text-align: left;
    .dropdown-item {
      width: auto;
      padding: 0.235em 1.5385em 0.235em 1.5385em !important;
      &::after {
        right: 0.5rem;
      }
    }
    .dropdown-submenu {
      margin: 0;
    }
  }
  &.open > .dropdown-menu {
    display: block;
  }
}
.navbar-toggleable-sm {
  &.opened:after {
    position: absolute;
    width: 100vw;
    height: 100vh;
    content: '';
    background-color: rgba(0, 0, 0, 0.1);
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    z-index: 1000;
  }
}
.navbar.navbar-short {
  min-height: 60px;
  transition: all .2s;
  & .navbar-toggler-right {
    top: 20px;
  }
  & .navbar-logo a {
    font-size: 2.5rem !important;
    line-height: 2.5rem;
    transition: font-size 0.25s;
    & .mbr-iconfont {
      font-size: 2.5rem !important;
    }
    & img {
      height: 3rem !important;
    }
  }
  & .navbar-brand {
    min-height: 3rem;
    color: green;
  }
}
button.navbar-toggler {
  width: 31px;
  height: 18px;
  cursor: pointer;
  transition: all .2s;
  top: 1.5rem;
  right: 1rem;
  &:focus {
    outline: none;
  }
  .hamburger span {
    position: absolute;
    right: 0;
    width: 30px;
    height: 2px;
    border-right: 5px;
    background-color: @hamburgerColor;
    &:nth-child(1) {
      top: 0;
      transition: all .2s;
    }
    &:nth-child(2) {
      top: 8px;
      transition: all .15s;
    }
    &:nth-child(3) {
      top: 8px;
      transition: all .15s;
    }
    &:nth-child(4) {
      top: 16px;
      transition: all .2s;
    }
  }
}
nav.opened .hamburger span {
  &:nth-child(1) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all .2s;
  }
  &:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .25s;
  }
  &:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: all .25s;
  }
  &:nth-child(4) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all .2s;
  }
}
.collapsed {
  &.navbar-expand {
    flex-direction: column;
  }
  .btn {
    display: flex;
  }
  .navbar-collapse {
    display: none !important;
    padding-right: 0 !important;
    &.collapsing,&.show {
      display: block !important;
      .navbar-nav {
        display: block;
        text-align: center;
        .nav-item {
          clear: both;
          & when (@showButtons = false) {
            &:last-child {
              margin-bottom: 1rem;
            }
          }
        }
      }
      .navbar-buttons {
        text-align: center;
        &:last-child {
          margin-bottom: 1rem;
        }
      }
    }
  }
  button.navbar-toggler {
    display: block;
  }
  .navbar-brand {
    margin-left: 1rem !important;
  }
  .navbar-toggleable-sm {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .dropdown {
    .dropdown-menu {
      width: 100%;
      text-align: center;
      position: relative;
      opacity: 0;
      display: block;
      height: 0;
      visibility: hidden;
      padding: 0;
      transition-duration: .5s;
      transition-property: opacity,padding,height;
    }
    &.open > .dropdown-menu {
      position: relative;
      opacity: 1;
      height: auto;
      padding: 1.4rem 0;
      visibility: visible;
    }
    .dropdown-submenu {
      left: 0;
      text-align: center;
      width: 100%;
    }
    .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
      margin-top: 0;
      position: inherit;
      right: 0;
      top: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: .3em;
      vertical-align: middle;
      content: "";
      border-top: .30em solid;
      border-right: .30em solid transparent;
      border-left: .30em solid transparent;
    }
  }
}
@media (max-width: 991px) {
  .navbar-expand {
    flex-direction: column;
  }
  img {
    height: 3.8rem !important;
  }
  .btn {
    display: flex;
  }
  button.navbar-toggler {
    display: block;
  }
  .navbar-brand {
    margin-left: 1rem !important;
  }
  .navbar-toggleable-sm {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .navbar-collapse {
    display: none !important;
    padding-right: 0 !important;
    &.collapsing,&.show {
      display: block !important;
      .navbar-nav {
        display: block;
        text-align: center;
        .nav-item {
          clear: both;
          & when (@showButtons = false) {
            &:last-child {
              margin-bottom: 1rem;
            }
          }
        }
      }
      .navbar-buttons {
        text-align: center;
        &:last-child {
          margin-bottom: 1rem;
        }
      }
    }
  }
  .dropdown {
    .dropdown-menu {
      width: 100%;
      text-align: center;
      position: relative;
      opacity: 0;
      display: block;
      height: 0;
      visibility: hidden;
      padding: 0;
      transition-duration: .5s;
      transition-property: opacity,padding,height;
    }
    &.open > .dropdown-menu {
      position: relative;
      opacity: 1;
      height: auto;
      padding: 1.4rem 0;
      visibility: visible;
    }
    .dropdown-submenu {
      left: 0;
      text-align: center;
      width: 100%;
    }
    .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
      margin-top: 0;
      position: inherit;
      right: 0;
      top: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: .3em;
      vertical-align: middle;
      content: "";
      border-top: .30em solid;
      border-right: .30em solid transparent;
      border-left: .30em solid transparent;
    }
  }
}
@media (min-width: 767px) {
  .menu-logo {
    flex-shrink: 0;
  }
}
.navbar-collapse {
  flex-basis: auto;
}
.nav-link:hover, .dropdown-item:hover {
  color: @itemsHoverColor !important;
}
.navbar-caption {
  font-size: 1.25rem !important;
  font-style: italic;
  font-family: taviraj;
  font-weight: 300;
}