How to centre navbar in Drupal 8 adaptive theme

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 {
#navbar li,
#navbar li {
float:none !important;
display:inline-block !important;
/* To centre menu nav bar */


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

Who am I?

I'm a father of 2 children, I enjoy playing guitar and the usual family pursuits. I have worked in the electrical industry for the last 17 years mainly within the contracting, wholesaling and manufacturing sectors.

I did my apprenticeship repairing electrical appliances in a retail and repair shop on a high street and since then have worked on a trade counter, ran my own electrical wholesalers and have worked on site as an electrician, all of which I've enjoyed and learnt a great deal from – good and bad!

Most of all I understand the many aspects involved in working within this industry, and most importantly upholding brand integrity.

What I Do

Over the last 12 years or so I have been building my experience in online procedures and algorithms and have enjoyed watching the internet grow into what it is today, especially the SEO and Web Development aspects. Due to these experiences I have gained, combining online marketing techniques and the electrical industry together allows to help break down the barriers between the trades person and end user.

Many other industries have been using on line social media for some time and enjoying great success, however it is still a relatively new concept in the electrical industry in the UK and my aim is to increase the awareness and revenue of on line marketing within this industry.

What I can offer

Your target audience is out there knocking on your door – you just need to open it. Every day people are on the internet looking for your product or service, you just need to invite them in. There are many companies in the electrical industry that enjoy great success and are very strong within the industry off line. Extending a companies image and profile as well as upholding its brand integrity can be a difficult task to accomplish on line. I can offer my experience so that an off line company can avoid the common pitfalls and maintain their professional company image on line. I can also design and maintain your Social Media campaigns at cost effect prices. Don't start your own conversations but join in existing ones. Social networking/media is currently the most efficient and cost effective way of achieving this.