How to centre navbar in Drupal 8 adaptive theme

Submitted by gazza on Sat, 15/04/2017 - 14:59

Over that last few months I have been using the amazing Drupal Adaptive Theme for my Drupal 8 builds. The default main menu navigation bar does everything required for both desktop and mobile devices. I was asked by a client to centre the menu bar for both desktop and mobile. Initially I thought this would be a simple task, this was not so!

The menu bar is separated into a number of div's which include: class id's and div id's in both region and ul li div's so I thought I would share this css code which you can add to your stylesheet:

    
/* To centre menu nav bar */
.ms-dropmenu .rm-block__content .menu-level-1 {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    display: inline-block;
    float: none;
}
#navbar {
text-align:center;
}
#navbar li,
#navbar ul.menu li {
float:none !important;
display:inline-block !important;
}
/* To centre menu nav bar */

**********************UPDATE*********************

This can also be achieved using the following by centering for wide screen devices only:

    
/* To center the menu bar on wide screen devices */ 
.menu { 
justify-content: center; 
}

Add new comment