Horizontal Navbar

Horizontal Navbar is a different user friendly layout system in Phoenix.

Horizontal navbar example

Horizontal Navbar structure

<p class="mb-0">Add <code>.navbar-horizontal </code>class in <code>Html </code>element to start with horizontal-navbar</p><pre class="scrollbar my-5"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html class=&quot;navbar-horizontal&quot;&gt;

  &lt;head&gt;...&lt;/head&gt;

  &lt;body&gt;
    &lt;main&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;nav class=&quot;navbar navbar-top navbar-expand-lg&quot;&gt;
          &lt;!-- navbar horizontal content goes hare--&gt;
        &lt;/nav&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;!--  content goes hare--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre>

Add .navbar-horizontal class in Html element to start with horizontal-navbar

<!DOCTYPE html>
<html class="navbar-horizontal">

  <head>...</head>

  <body>
    <main>
      <div class="container-fluid">
        <nav class="navbar navbar-top navbar-expand-lg">
          <!-- navbar horizontal content goes hare-->
        </nav>
        <div class="content">
          <!--  content goes hare-->
        </div>
      </div>
    </main>
  </body>

</html>

Responsive behavior 

<p class="mb-0">Phoenix used the Bootstrap's <code>.navbar-expand{-sm|-md|-lg|-xl|-xxl} </code> classes in <code>.navbar-top </code>element to decide when the navbar top will expand or not.</p><pre class="scrollbar mt-5"><code class="language-html">&lt;nav class=&quot;navbar navbar-top navbar-expand-lg&quot;&gt;&lt;/nav&gt;</code></pre>

Phoenix used the Bootstrap's .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes in .navbar-top element to decide when the navbar top will expand or not.

<nav class="navbar navbar-top navbar-expand-lg"></nav>

Horizontal Navbar appearance

<p>You can control top nav style of vertical navbar between defaults and darker.</p>
<p class="mb-0">From your project directory, If you are using gulp version open <code>src/js/config.js </code>or if you are using directly from the public folder open <code>public/assets/js/theme.js </code>and set <code>phoenixNavbarTopStyle: darker </code>of <code>CONFIG </code>object to collapse the Vertical Navigation by default</p><pre class="scrollbar my-5"><code class="lang-html">const CONFIG = {
  phoenixNavbarTopStyle: 'default' || 'darker',
  ...
};
</code></pre>
<p class="mb-0">Or to change navbar vertical color just add <code>navbar-darker </code>css class with <code>navber-vertical </code>class</p><pre class="scrollbar mt-3"><code class="language-html">&lt;nav class=&quot;navbar navbar-top navbar-darker&quot;&gt;&lt;/nav&gt;</code></pre>

You can control top nav style of vertical navbar between defaults and darker.

From your project directory, If you are using gulp version open src/js/config.js or if you are using directly from the public folder open public/assets/js/theme.js and set phoenixNavbarTopStyle: darker of CONFIG object to collapse the Vertical Navigation by default

const CONFIG = {
  phoenixNavbarTopStyle: 'default' || 'darker',
  ...
};

Or to change navbar vertical color just add navbar-darker css class with navber-vertical class

<nav class="navbar navbar-top navbar-darker"></nav>

Horizontal navbar slim

Redusing horizontal navbar height, Pheonix comes with another layout called horizontal navbar slim.

Horizontal navbar slim example

Horizontal Navbar slim structure

<pre class="scrollbar my-5"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html class=&quot;navbar-horizontal&quot;&gt;

  &lt;head&gt;...&lt;/head&gt;

  &lt;body class=&quot;nav-slim&quot;&gt;
    &lt;main&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;nav class=&quot;navbar navbar-top navbar-expand-lg navbar-slim&quot;&gt;
          &lt;!-- navbar horizontal content goes hare--&gt;
        &lt;/nav&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;!--  content goes hare--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre>
<!DOCTYPE html>
<html class="navbar-horizontal">

  <head>...</head>

  <body class="nav-slim">
    <main>
      <div class="container-fluid">
        <nav class="navbar navbar-top navbar-expand-lg navbar-slim">
          <!-- navbar horizontal content goes hare-->
        </nav>
        <div class="content">
          <!--  content goes hare-->
        </div>
      </div>
    </main>
  </body>

</html>

Thank you for creating with Phoenix|
2022 ©Themewagon

v1.6.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize