Home/ Questions/Q 9121845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T05:57:15+00:00

I am trying to define two menu’s in my header using the bootmetro framework.

  • 0

I am trying to define two menu’s in my header using the bootmetro framework. The first is my main menu and the second is my user menu.

For some reason the menu is visualized wrong the second time, the line space of the menu items are too large.

The code used to create a menu looks something like this

<div class="dropdown">
    <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
        Actions
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li class="divider"></li>
        <li><a href="#">item4</a></li>
    </ul>
</div>

The problem I run in to is shown in the screenshots below. In my second menu the menu item does not take the full with of the menu.

UPDATE:

The problem seems to be in the bootmetro CSS stylesheet and firebug narrows the search a bit (thanks Thanh Trung!). In inspect mode I can clearly see that the a href does not fill the menu item (li) in my second menu, while it does take the max width in my first menu.

The part in the bootmetro CSS looks like this:

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}

Additional question: What does this ‘>’ cause? I have never seen that before.

In both menus the CSS class “dropdown-menu” is used, BUT, when I remove the body of this CSS class only the first menu changes accordingly.

Main question: So why is this class not properly inherited by me second menu item?

For completeness again the HTML code for the second menu (the menu that shows the artifact):

<div class="dropdown pull-left">
        <a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
            <b class="icon-settings"></b>
        </a>
        <ul class="dropdown-menu pull-right">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a href="#">Log out</a></li>
        </ul>
    </div>

Menu 1

Correctly visualized menu

Menu 2

Wrongly visualized menu

Menu 3

Inspection: the “a” is not taking the full width

Menu 4

Inspection: the list item is taking the full width

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because the code is identical, but there are difference when displaying, it means that the css is affecting it. Without given us the css, it’s impossible to tell what is the problem.

    Here are css properties that could affect the total height of an element: height, line-height, padding, margin.

    You can use Firebug or Chrome inspector to inspect an element to see its styles

    UPDATE

    bootmetro.css line 2018 is affecting (overriding) it

    #top-info a {
   display: inline-block;
   height: 46px;   /**** should be removed or override *****/
   color: #5A5A5A;
}

    Also I suggest you to use Firebug (an addon of firefox) to inspect elements, dont use the inspector of Firefox

    • 0