0

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:

http://worldsowisdom.com/wow/

Thank you!

Menu shows on two lines instead of one.

  • 1
    Look at the source for "About Worlds O Wisdom" looks like is out of the main menu look at the block "bartik-main-menu" and see how many levels it is displaying and select only 1 – Taggart Jensen Jan 29 at 3:55
2

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

items on one row

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.

  • Thank you for the comprehensive answer! I wound up placing all the items at the same level. I may have set up the hierarchy in Drupal 7 and not noticed until now that it didn't look the same in Drupal 8. – Eagle Gamma Jan 30 at 10:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.