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 comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...