Jump to content
newcoder1010

How to fix position a block

Recommended Posts

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
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.

Loading...

×
×
  • Create New...