WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Categories below are responsive, mobile friendly (drop-down). Resize your browser to test.

<!-- CATEGORIES -->
<div class="side-nav mb-60">

	<div class="side-nav-head">
		<button class="fa fa-bars"></button>
		<h4>CATEGORIES</h4>
	</div>

	<ul class="list-group list-group-bordered list-group-noicon uppercase">
		<li class="list-group-item active">
			<a class="dropdown-toggle" href="#">WOMEN</a>
			<ul>
				<li><a href="#"><span class="fs-11 text-muted float-right">(123)</span> Shoes & Boots</a></li>
				<li class="active"><a href="#"><span class="fs-11 text-muted float-right">(331)</span> Top & Blouses</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(234)</span> Dresses & Skirts</a></li>

				<li class="list-group-item active">
					<a class="dropdown-toggle" href="#">DEEP LEVEL NAV 1</a>
					<ul>
						<li><a href="#"><span class="fs-11 text-muted float-right">(88)</span> Accessories</a></li>
						<li><a href="#"><span class="fs-11 text-muted float-right">(67)</span> Shoes & Boots</a></li>
						<li class="list-group-item active">
							<a class="dropdown-toggle" href="#">DEEP LEVEL NAV X</a>
							<ul>
								<li><a href="#"><span class="fs-11 text-muted float-right">(88)</span> Accessories</a></li>
								<li><a href="#"><span class="fs-11 text-muted float-right">(67)</span> Shoes & Boots</a></li>
							</ul>
						</li>
					</ul>
				</li>

			</ul>
		</li>
		<li class="list-group-item">
			<a class="dropdown-toggle" href="#">MEN</a>
			<ul>
				<li><a href="#"><span class="fs-11 text-muted float-right">(88)</span> Accessories</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(67)</span> Shoes & Boots</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(32)</span> Dresses & Skirts</a></li>
				<li class="active"><a href="#"><span class="fs-11 text-muted float-right">(78)</span> Top & Blouses</a></li>
			</ul>
		</li>
		<li class="list-group-item">
			<a class="dropdown-toggle" href="#">JEWELLERY</a>
			<ul>
				<li><a href="#"><span class="fs-11 text-muted float-right">(23)</span> Dresses & Skirts</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(34)</span> Shoes & Boots</a></li>
				<li class="active"><a href="#"><span class="fs-11 text-muted float-right">(21)</span> Top & Blouses</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(88)</span> Accessories</a></li>
			</ul>
		</li>
		<li class="list-group-item">
			<a class="dropdown-toggle" href="#">KIDS</a>
			<ul>
				<li><a href="#"><span class="fs-11 text-muted float-right">(88)</span> Shoes & Boots</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(22)</span> Dresses & Skirts</a></li>
				<li><a href="#"><span class="fs-11 text-muted float-right">(31)</span> Accessories</a></li>
				<li class="active"><a href="#"><span class="fs-11 text-muted float-right">(18)</span> Top & Blouses</a></li>
			</ul>
		</li>
		<li class="list-group-item"><a href="#"><span class="fs-11 text-muted float-right">(189)</span> ACCESSORIES</a></li>
		<li class="list-group-item"><a href="#"><span class="fs-11 text-muted float-right">(61)</span> GLASSES</a></li>

	</ul>

</div>
<!-- /CATEGORIES -->
<!-- side navigation -->
<div class="side-nav mb-60">

	<div class="side-nav-head">
		<button class="fa fa-bars"></button>
		<h4>CATEGORIES</h4>
	</div>

	<ul class="list-group list-unstyled">
		<li class="list-group-item"><a href="shortcode-animations.html">Animations</a></li>
		<li class="list-group-item active"><a href="shortcode-buttons.html">Buttons</a></li>
		<li class="list-group-item"><a href="shortcode-carousel.html">Carousel</a></li>
		<li class="list-group-item"><a href="shortcode-charts.html">Charts</a></li>
		<li class="list-group-item"><a href="shortcode-clients.html">Clients</a></li>
		<li class="list-group-item"><a href="shortcode-columns.html">Columns</a></li>
		<li class="list-group-item"><a href="shortcode-counters.html">Counters</a></li>
		<li class="list-group-item"><a href="shortcode-dividers.html">Dividers</a></li>
		<li class="list-group-item"><a href="shortcode-icon-boxes.html">Boxes & Icons</a></li>
		<li class="list-group-item"><a href="shortcode-galleries.html">Galleries</a></li>
	</ul>

</div>
<!-- /side navigation -->

Navbar

<nav class="navbar navbar-toggleable-md navbar-light bg-light">
  <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">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Navbar Inverted

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <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">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Navbar Color

<!--
.navbar-primary
.bg-primary
.bg-info
.bg-warning
.bg-danger
>
<nav class="navbar navbar-inverse navbar-primary nobottommargin" role="navigation">

<nav class="navbar navbar-toggleable-md nnavbar-primary mb-0<">
  <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">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Pills with Dropdowns

<ul class="nav nav-pills">
  <li class="nav-item"><a href="#">Home</a></li>
  <li class="nav-item"><a href="#">About</a></li>
  <li class="nav-item dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown 
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown-item"><a href="#">Action</a></li>
      <li class="dropdown-item"><a href="#">Another action</a></li>
      <li class="dropdown-item"><a href="#">Something else here</a></li>
      <li class="dropdown-item divider"></li>
      <li class="dropdown-item"><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>

Tabs

<ul class="nav nav-tabs">
	<li class="nav-item"><a class="nav-link active" href="#tab1">Home</a></li>
	<li class="nav-item"><a class="nav-link" href="#tab2">Help</a></li>
	<li class="nav-item dropdown">
		<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#tab3">
			Dropdown 
		</a>
		<ul class="dropdown-menu">
			<li class="dropdown-item"><a href="#">Action</a></li>
			<li class="dropdown-item"><a href="#">Another action</a></li>
			<li class="dropdown-item"><a href="#">Something else here</a></li>
			<li class="dropdown-item divider"></li>
			<li class="dropdown-item"><a href="#">Separated link</a></li>
		</ul>
	</li>
</ul>

Justified Tabs


<ul class="nav nav-tabs nav-justified">
	<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
	<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
	<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>

Pills

<ul class="nav nav-pills">
	<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
	<li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
	<li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>