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;
}