1. Home
  2. Marco HTML
  3. Navigation
  4. Navigation height

Navigation height

Yo can control the height of each navigation using HTML/CSS. By default the mobile navigation has 100px height, fixed nav bar is set to 80px and main navigation is set to 150px.


How to change mobile nav bar height?

 

SCSS

To adjust this change height in navbar.scss file:

...
   @include breakpoint(medium down) {
      $mobile-nav-height: #height;
     ...

 

CSS

To adjust this change height in app.css file:

...
  @media screen and (max-width: 63.9375em) {
  .nav-solid .page-wrapper {
    padding-top: #height; }
    .nav-solid .page-wrapper .home-bg-slider {
      top: #height; }
    .nav-solid .page-wrapper .page-intro {
      margin-top: #height; }
  .main-navigation {
    height: #height; }
    .main-navigation .nav-wrapper {
      height: #height; }
  .nav-transparent .intro-content-wrapper {
    padding-top: #height + 60px !important; }
  .mobile-navbar-overlay .menu-mobile {
    margin-top: #height !important; } }
...

 
Where #height is your desired height. Naturally, if you wanted a bigger, make it greater than 100px and less, for a smaller. Keep in mind the logo height adapts automatically to navigation height.


How to change fixed nav bar height?

 
To adjust this change “data-height-fixed-nav” in ‘body’ element:

...
  <body class="nav-classes nav-bottom nav-solid nav-dark-text nav-left" data-height-fixed-nav="#height">
...

 
Where #height is your desired height (without pixels). Naturally, if you wanted a bigger, make it greater than 80px and less, for a smaller. Keep in mind the logo height adapts automatically to navigation height.


How to change main navigation height?

 

SCSS

To adjust this change height in navbar.scss file:

...
   @include breakpoint(large) {
      $navigation-height: #height;
     ...

 

CSS

To adjust this change height in app.css file:

...
  @media screen and (min-width: 64em) {
   .main-navigation .nav-wrapper {
    height: #height; }
   .nav-solid.nav-top .page-wrapper {
    padding-top: #height; }
     .nav-solid.nav-top .page-wrapper .home-bg-slider {
      top: #height; }
     .nav-solid.nav-top .page-wrapper .page-intro {
      margin-top: #height; }
   .nav-transparent.nav-top .page-wrapper .intro-content-wrapper {
    padding-top: #height + 90px !important; }
   .nav-transparent.nav-top .page-wrapper .home-content {
    padding-top: #height + 60px; }
     .nav-transparent.nav-top .page-wrapper .home-content .home-top {
      top: #height + 60px; }
   .nav-solid.nav-bottom .page-wrapper .home-bg-slider {
    bottom: #height; }
   .nav-transparent.nav-bottom .page-wrapper .home-content {
    padding-bottom: #height + 60px; }
     .nav-transparent.nav-bottom .page-wrapper .home-content .home-bottom {
      bottom: #height + 60px; } }
...

 
Where #height is your desired height. Naturally, if you wanted a bigger, make it greater than 150px and less, for a smaller. Keep in mind the logo height adapts automatically to navigation height.
 

Was this article helpful to you? Yes No