Sign in to follow this  
support

Как сделать что б не "прыгал" контент под полоской навигации при прокрутке страницы?

Recommended Posts

support

В Админке - Оформление - Шаблоны - Основной шаблон оберните nav ... /nav новым блоком, например, меняйте:

 <nav id="nav" data-spy="affix" data-offset-top="140" data-offset-bottom="0">    
  <div class="navbar navbar-default navigation">
   <div class="container">    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle toggle-menu menu-left" aria-label="navbar" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only"></span>                
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     <a class="navbar-brand" href="{base_path}/" aria-hidden="true">
         <i class="fa fa-home"></i>
     </a>
    </div>
    <div class="collapse navbar-collapse navbar-default cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="navbar-collapse">
   <ul class="nav navbar-nav">
     <li class="dropdown">
       <a data-toggle="dropdown" class="dropdown-toggle" href="">{lang}Categories{/lang} <b class="caret"></b></a>
         <ul class="dropdown-menu">
           {content_listing template="links" parent="0" type="category"}
         </ul>
     </li>
   </ul>
     <form class="navbar-form navbar-left" role="search" action="{base_path}/page/search-result{config value=url_extension}" method="get">
       <div class="input-group">
           <input type="text" class="form-control" placeholder="{lang}Search{/lang}" name="keyword" aria-label="search">
           <div class="input-group-btn">
               <button class="btn btn-primary" aria-label="submit" type="submit"><i class="fa fa-search"></i></button>
           </div>
       </div>
     </form>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="{base_path}/page/account{config value=url_extension}" title="{lang}My Orders{/lang}"><i class="fa fa-user"></i> {lang}My Orders{/lang}</a></li>
         <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle cart" data-target="#" href="{base_path}/page/cart-contents{config value=url_extension}" title="{lang}Cart{/lang}"><i class="fa fa-shopping-cart"></i> {lang}Cart{/lang} {if {shopping_cart_total} > 0}<sup><span title="{shopping_cart_total}" class="badge progress-bar-danger">{shopping_cart_total}</span></sup>{/if} <span class="caret"></span></a>
	         <ul class="dropdown-menu cart">
	           <li><div id="shopping-cart-box">{shopping_cart template="cart-content-box" showempty="true"}</div></li>
	         </ul>
         </li>
      </ul>
    </div>
   </div>
  </div>  
 </nav>

на:

<div class="nav-wrapper">
 <nav id="nav" data-spy="affix" data-offset-top="140" data-offset-bottom="0">    
  <div class="navbar navbar-default navigation">
   <div class="container">    
    <div class="navbar-header">
      <button type="button" class="navbar-toggle toggle-menu menu-left" aria-label="navbar" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="sr-only"></span>                
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
     <a class="navbar-brand" href="{base_path}/" aria-hidden="true">
         <i class="fa fa-home"></i>
     </a>
    </div>
    <div class="collapse navbar-collapse navbar-default cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="navbar-collapse">
   <ul class="nav navbar-nav">
     <li class="dropdown">
       <a data-toggle="dropdown" class="dropdown-toggle" href="">{lang}Categories{/lang} <b class="caret"></b></a>
         <ul class="dropdown-menu">
           {content_listing template="links" parent="0" type="category"}
         </ul>
     </li>
   </ul>
     <form class="navbar-form navbar-left" role="search" action="{base_path}/page/search-result{config value=url_extension}" method="get">
       <div class="input-group">
           <input type="text" class="form-control" placeholder="{lang}Search{/lang}" name="keyword" aria-label="search">
           <div class="input-group-btn">
               <button class="btn btn-primary" aria-label="submit" type="submit"><i class="fa fa-search"></i></button>
           </div>
       </div>
     </form>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="{base_path}/page/account{config value=url_extension}" title="{lang}My Orders{/lang}"><i class="fa fa-user"></i> {lang}My Orders{/lang}</a></li>
         <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle cart" data-target="#" href="{base_path}/page/cart-contents{config value=url_extension}" title="{lang}Cart{/lang}"><i class="fa fa-shopping-cart"></i> {lang}Cart{/lang} {if {shopping_cart_total} > 0}<sup><span title="{shopping_cart_total}" class="badge progress-bar-danger">{shopping_cart_total}</span></sup>{/if} <span class="caret"></span></a>
	         <ul class="dropdown-menu cart">
	           <li><div id="shopping-cart-box">{shopping_cart template="cart-content-box" showempty="true"}</div></li>
	         </ul>
         </li>
      </ul>
    </div>
   </div>
  </div>  
 </nav>
</div>  

и в /app/webroot/css/vamshop.css добавьте стиль:

.nav-wrapper
{
    min-height:50px;
}

Всё, теперь блок с контентом не будет прышать при прокрутке страницы вниз, в момент, когда полоска навигации цепляется к верхней границе окна.

Share this post


Link to post
Share on other sites

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
Sign in to follow this