• CSS Framework for restaurant sites

Getting Started

Download Content Typography Cards Images Navigation Carousel Sidebar Button Accordion Grid Forms Tabs Gallery Tables Menu Grid Media Queries Help classes

Navigation

Top Toolbar

- Here’s what you need to know before getting started with the Toolbar:
  1. Toolbar require a wrapping of class .top-toolbar.
  2. Toolbar is responsive and has widht of 100%. I
  3. We used flex to seperate the contents inside toolbar
  4. Left right content is wrapped in separate classes .top-toolbar-left and .top-toolbar-right.
  • Login

  • Open daily: 7:30 am to 11:00 pm

HTML Structure:-

<div class="top-toolbar ">
  <div class="top-toolbar-left">
	<ul class="text-widget">
	  <li> ...</li>
	  <li>... </li>
	</ul>
 </div>
 <div class="top-toolbar-right ">
  <ul class="text-widget social-widgets">
   <li> ...</li>
   <li>... </li>
  </ul>
 </div>
</div>

Navbar

- Here’s what you need to know before getting started with the Navbar:
  1. Navbars require a wrapping of class .navbar-container.
  2. Toolbar is responsive and has widht of 100%. It goes to hamburber menu at smaller screen size
  3. We used flex to seperate the navigation items. You can add multiple items inside navigation. To avoid collapse need to adjust the padding and font-size on .nav-title class.
<nav class="navbar-container">
 <div class="logo">
  <a href="#" class="navbar-brand">Restaurant-logo</a>
 </div>
 <button id="navbar-toggler">
   <span class="menu-bar"><i class="fas fa-bars"></i></span>
 </button>
 <div id="menu">
   <ul class="main-nav">
      <li class="nav-item">...</li>
      <li class="nav-item">...</li>
      <li class="nav-item dropdown-menu">
        <ul class="dropdown">
          <li class="dropdown-menu-item">...</li>
          <li class="dropdown-menu-item">...</li>
        </ul>
      </li>
     <li class="nav-item">...</li>
     <li class="nav-item">...</li>
  </ul>
 </div>
</nav>

Toolbar and Navbar Together

<div class="top-toolbar ">
  <div class="top-toolbar-left">
	<ul class="text-widget">
	  <li> ...</li>
	  <li>... </li>
	</ul>
 </div>
 <div class="top-toolbar-right ">
  <ul class="text-widget social-widgets">
   <li> ...</li>
   <li>... </li>
  </ul>
 </div>
</div>
       		

<nav class="navbar-container">
 <div class="logo">
  <a href="#" class="navbar-brand">Restaurant-logo</a>
 </div>
 <button id="navbar-toggler">
   <span class="menu-bar"><i class="fas fa-bars"></i></span>
 </button>
 <div id="menu">
   <ul class="main-nav">
      <li class="nav-item">...</li>
      <li class="nav-item">...</li>
      <li class="nav-item dropdown-menu">
        <ul class="dropdown">
          <li class="dropdown-menu-item">...</li>
          <li class="dropdown-menu-item">...</li>
        </ul>
      </li>
     <li class="nav-item">...</li>
     <li class="nav-item">...</li>
  </ul>
 </div>
</nav>

More examples

See Example