How to fix position a block

[newcoder1010]

HTML:

<div class="region region-navigation">
    <section data-quickedit-entity-id="block_content/14" id="block-callxs" class="hidden-sm hidden-lg col-xs-12 contextual-region block block-block-content block-block-content004572fb-7e9a-4693-9b0d-57f14d99fc7e clearfix" data-quickedit-entity-instance-id="0">
     
  </section>

<nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu" class="contextual-region">
 <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2>

 <div data-mediasize="768" class="responsive-menus responsive-menus-0-1-0 absolute"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple menu menu--main nav navbar-nav" id="rm-no-id">
</div>
  </nav>

  </div>

 

For mobile CSS:

#block-callxs{
   background: blue;
   color: white;
   text-align: center;
   position: fixed;
   z-index:99;

}

When I visit the mobile page, I see the position fixed but the responsive-menus block not visible. How to display the responsive menus below the callxs block?

Thanks

[dsonesuk]

Class hidden-sm, means hide if small mobile, so it does what it says on the box.

[newcoder1010]

The hidden-sm here means hide it for tablet devices. That is the phone number block. That is the block is fixed positioned. col-xs-12 is for mobile and it is displaying on mobile just fine. 

So when I place this first block fixed 

#block-callxs

Second block is not visible:

<nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu" class="contextual-region">
 <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2>

 <div data-mediasize="768" class="responsive-menus responsive-menus-0-1-0 absolute"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple menu menu--main nav navbar-nav" id="rm-no-id">
</div>
  </nav>

 

I like to place the second block under the first block. Now I only see the first block. I can see both blocks if I remove fixed. 

[newcoder1010]

Complete html for that region:

<header class="navbar navbar-default" id="navbar" role="banner">
            <div class="navbar-header">
          <div class="region region-navigation">
    <section id="block-callxs" class="hidden-sm hidden-md hidden-lg col-xs-12 block block-block-content block-block-content004572fb-7e9a-4693-9b0d-57f14d99fc7e clearfix">
  
    

      
            <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><div class="col-xs-12 cblkbdy">
<div hidden-md="" hidden-lg="" text-center=""> <h2> <span class="glyphicon glyphicon-earphone"></span> 256 - 200 - 9808 </h2> </div>
<div class="hidden-xs"><span class="glyphicon glyphicon-earphone"></span><p><span class="callussp hidden-xs">Call Us Now </span> </p><h2> 256 - 200 - 9808</h2> </div>

</div></div>
      
  </section>

<nav role="navigation" aria-labelledby="block-subboottheme-main-menu-menu" id="block-subboottheme-main-menu">
            <h2 class="sr-only" id="block-subboottheme-main-menu-menu">Main navigation</h2>

      
      <div data-mediasize="992" class="responsive-menus responsive-menus-0-1-0 absolute responsified"><span class="toggler">☰ Menu</span><ul class="responsive-menus-simple" id="rm-removed">
                      <li class="first">
                                        <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
              </li>
                      <li>
                                        <a href="/node/4" data-drupal-link-system-path="node/4">How it works</a>
              </li>
                      <li>
                                        <a href="/node/6" data-drupal-link-system-path="node/6">About Us</a>
              </li>
                      <li class="last">
                                        <a href="/node/5" data-drupal-link-system-path="node/5">Contact Us</a>
              </li>
        </ul></div>
  

  </nav>

  </div>

                      </div>

                          </header>

 

[dsonesuk]

you have missing/misplaced quote to get this!

<div hidden-md="" hidden-lg="" text-center="">