Jump to content

Topmenu unclickable while using 'display: table-cell'

Recommended Posts

I'm using bootstrap.Template snippet:

<div class="container" <?php if (!empty($css_id)) { print "id="$css_id""; } ?>>  <div class="row top">    <div class="col-md-8"><?php print $content['top_left_8']; ?></div>    <div class="col-md-4"><?php print $content['top_right_4']; ?></div>  </div>  <div class="row main">    <div class="col-md-8 mainmenu"><?php print $content['main_left_8']; ?></div>    <div class="col-md-4"><?php print $content['main_right_4']; ?></div>  </div>  <div class="row">    <div class="col-md-4"><?php print $content['middle_left_4']; ?></div>    <div class="col-md-4"><?php print $content['middle_center_4']; ?></div>    <div class="col-md-4"><?php print $content['middle_right_4']; ?></div>  </div></div>

In the first row is the topmenu in 'col-md-8. The 'col-md-4' column is empty. The next row also comes with 'col-md-8' and 'col-md-4'. In 'col-md-8' is the mainmenu. Beside the mainmenu comes a slider. The slider is 360px high. So I use the following CSS to position the mainmenu at the bottom of the row:

.row > .mainmenu {    float: none;    display: table-cell;    vertical-align: bottom;}

If I use 'display: table-cell' the topmenu buttons are unclickable. Without 'display: table-cell' the layout crashes. But the topmenu is active. In contrast to that the entire mainmenu is always clickable. That scenario only happens if the 'col-md-4' column in the topmenu row is empty. If I fill the empty column beside topmenu with dummy content topmenu is clickable.


screenshotIs there an alternative for 'display: table-cell'?

Link to post
Share on other sites
  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...