Drupal Answers is a question and answer site for Drupal developers and administrators. It only takes a minute to sign up.
Sign up to join this community
In Drupal 8, I have a main menu in the "Primary menu" block of the default Bartik theme. You can see a screenshot below. This site was upgraded from Drupal 7.
Why does the menu show up on two lines instead of one? There is plenty of space available for the menu items. I have tried adjusting the menu and block settings, but have not managed to reduce these to one line. All of the menu items other than "WOW" and "About" have "WOW" as the parent item.
You can see the site here:
Thank you!
This is happening because of the CSS technique/code being used. Both <li> and <a> have been floated.
The first WOW item actually contains all the other WOW items as children, and it's reflected in the HTML structure, there is an <ul> inside the WOW <li>. Since <li> is floated but it hasn't been given a specific width, there are some cases that can happen, like this one, that seem a bit odd, but they're just following the code.
I guess the authors of that theme didn't anticipate the menu might be used in this way, to display two levels of menu hierarchy on one line.
Usually one level of the menu is displayed in one region, and deeper levels are displayed elsewhere or in a drop-down.
You could add two Main menu blocks to that region, and set one Block to display Initial visibility level and Number of levels to display to 1 and 1, and the other Block to 2 and 1. This way you'd get WOW and About in one row, but when you visit WOW a second row would appear with all the WOW-subitems.
If they are meant to always be displayed maybe it makes sense not to have two levels in hierarchy?
But in the end you can always adjust the CSS to make them display all on one row (you can use CSS edit module to override CSS if you don't have a subtheme):
.region-primary-menu .menu-item,
body:not(:target) .region-primary-menu .menu-item {
float: none;
}
This will make them show on one row since now only anchors are floated. But the margin won't have affect so you'll need to add margin to the anchor elements instead, if you want them separate a bit like before.
