Menu above the page

0

I put the position: fixed, and the site is up and down the menu, if I enter the position: relative the site is normal, but the menu does not scroll down:

code:

#header-bar{position:fixed;top:0;width:100%;background-color:white;padding:0px0;-webkit-box-shadow:002px0#1e2648;box-shadow:002px0#1e2648;z-index:10000;}#header-bar.inside{display:block;width:100%;max-width:1200px;margin:0auto;}#header-bar.left-block{float:left;}#header-bar.right-block{float:right;}#header-bar.logo{float:left;}#header-bar.logoa{float:left;max-width:190px;width:190px;height:40px;position:relative;}#header-bar.logoimg{position:absolute;width:auto;height:auto;display:block;max-width:100%;max-height:40px;margin:auto;top:0;left:0;bottom:0;right:0;}#header-bar.logout{margin:00015px;text-decoration:none;float:right;width:40px;padding:8px0px;text-align:center;line-height:22px;height:40px;font-size:22px;color:#444;background:#eee;border:1pxsolid#ddd;}#header-bar.logout:hover{border-color:#bbb;background:#f8f8f8;}#header-bar.publish{margin:00015px;background:#2CC17B;text-decoration:none;color:#fff;float:right;width:auto;text-align:center;padding:11px13px;font-size:13px;text-transform:uppercase;font-weight:600;line-height:16px;height:40px;}#header-bar.publish:hover{background:#239761;text-decoration:none;}#header-bar.account{float:right;margin:00010px;}#header-bar.profile{float:left;margin:2px02px15px;font-size:13px;padding:9px13px;height:36px;line-height:16px;text-decoration:none;font-weight:500;border:1pxsolid#1E2648;background:#fff;color:#1E2648;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;}#header-bar.profile:hover{color:#fff;background:#1E2648;}#header-bar.picture{float:left;overflow:hidden;margin:2px02px15px;width:36px;height:36px;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;}#header-bar.pictureimg{float:left;display:block;width:auto;height:auto;max-width:36px;max-height:36px;-webkit-transition:0.1slinearall;-moz-transition:0.1slinearall;-ms-transition:0.1slinearall;-o-transition:0.1slinearall;transition:0.1slinearall;}#header-bar.notification{float:right;margin:0;border-right:1pxsolid#eee;padding:025px00;}#header-bar.notification>a{text-align:center;position:relative;float:left;margin:2px02px15px;background:#eee;color:#777;font-size:16px;line-height:18px;padding:10px0;width:36px;height:36px;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;}#header-bar.notification>a:hover{color:#000;background:#f8f8f8;}#header-bar.notification>aspan.counter{color:#fff;position:absolute;top:-5px;right:-4px;padding:1px4px;font-weight:600;font-size:12px;line-height:14px;text-align:center;width:auto;min-width:16px;height:16px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}#header-bar.notification>a.messagespan.counter{background:#E55934}#header-bar.notification>a.alertspan.counter{background:#FA7921}#header-bar.notification>a.itemspan.counter{background:#EDD840}#header-bar.language{float:left;margin:4px04px20px;}#header-barspan.info{float:left;clear:both;width:100%;padding:8px6px;line-height:14px;color:#888;background:#f0f0f0;margin:005px0;font-style:italic;}#body-home#header-bar,#body-search#header-bar{border-bottom-color:#239761;}#body-user-public-profile.flash-wrap{margin-top:15px;margin-bottom:-10px;}

HTML

<divid="header-bar">
  <div class="inside">
    <a href="#" id="h-options" class="header-menu resp is767" data-link-id="#menu-options">
      <span class="line tr1"></span>
      <span class="line tr1"></span>
      <span class="line tr1"></span>
    </a>

    <a id="h-search" class="header-menu resp is767 tr1" data-link-id="#menu-search">
      <span class="tr1"></span>
    </a>

    <a id="h-user" class="header-menu resp is767 tr1" data-link-id="#menu-user">
      <span class="tr1"></span>
      <?php if(function_exists('im_messages')) { ?>
        <div class="counter"><?php echo $message_count; ?></div>
      <?php } ?>
    </a>


    <div class="left-block">
      <div class="logo not767">
        <a class="resp-logo" href="<?php echo osc_base_url(); ?>"><?php echo logo_header(); ?></a>
      </div>

      <?php if(osc_is_ad_page()) { ?>
        <a id="history-back" class="is767" href="<?php echo osc_search_url(panamerico_search_params()); ?>"><i class="fa fa-angle-left"></i><span><?php _e('Buscar', 'panamerico'); ?></span></a>
      <?php } else if(osc_is_home_page()) { ?>
        <a class="logo-text is767" href="<?php echo osc_base_url(); ?>"><span><?php echo osc_get_preference('logo_text', 'panamerico_theme'); ?></span></a>
      <?php } else { ?>
        <a id="history-back" class="is767" href="<?php echo osc_base_url(); ?>"><i class="fa fa-angle-left"></i><span><?php _e('Home', 'panamerico'); ?></span></a>
      <?php } ?>

      <div class="language not767">
        <?php if ( osc_count_web_enabled_locales() > 1) { ?>
          <?php $current_locale = mb_get_current_user_locale(); ?>

          <?php osc_goto_first_locale(); ?>
          <span id="lang-open-box">
            <div class="mb-tool-cover">
              <span id="lang_open" class="round3<?php if( osc_is_web_user_logged_in() ) { ?> logged<?php } ?>">
                <span>
                  <span class="non-resp"><?php echo $current_locale['s_short_name']; ?></span>
                  <span class="resp"><?php echo strtoupper(substr($current_locale['pk_c_code'], 0, 2)); ?></span>

                  <i class="fa fa-angle-down"></i></span>
              </span>

              <div id="lang-wrap" class="mb-tool-wrap">
                <div class="mb-tool-cover">
                  <ul id="lang-box">
                    <span class="info"><?php _e('Selecionar idioma', 'panamerico'); ?></span>

                    <?php $i = 0 ;  ?>
                    <?php while ( osc_has_web_enabled_locales() ) { ?>
                      <li <?php if( $i == 0 ) { echo "class='first'" ; } ?> title="<?php echo osc_esc_html(osc_locale_field("s_description")); ?>"><a id="<?php echo osc_locale_code() ; ?>" href="<?php echo osc_change_language_url ( osc_locale_code() ) ; ?>"><img src="<?php echo osc_current_web_theme_url();?>images/country_flags/<?php echo strtolower(substr(osc_locale_code(), 3)); ?>.png" alt="<?php _e('Bandeira do país', 'panamerico');?>" /><span><?php echo osc_locale_name(); ?></span></a><?php if (osc_locale_code() == $current_locale['pk_c_code']) { ?><i class="fa fa-check"></i><?php } ?></li>
                      <?php $i++ ; ?>
                    <?php } ?>
                  </ul>
                </div>
              </div>
            </div>
          </span>
        <?php } ?>
      </div>


      <?php if(!osc_is_home_page() && !osc_is_search_page()) { ?>
        <div id="top-search" class="non-resp">
          <a href="<?php echo osc_search_url(panamerico_search_params()); ?>" class="btn"><i class="fa fa-search"></i><span><?php _e('Buscar', 'panamerico'); ?></span></a>
        </div>
      <?php } ?>
    </div>

    <div class="right-block not767">

      <?php if(osc_is_web_user_logged_in()) { ?>
        <a class="logout round3 tr1" href="<?php echo osc_user_logout_url(); ?>"><i class="fa fa-sign-out"></i></a>
      <?php } ?>

      <a class="publish round3 tr1" href="<?php echo osc_item_post_url(); ?>">
        <span class="non-resp"><?php _e('<i class="fa fa-tag"></i> Inserir Anúncio', 'panamerico'); ?></span>
        <span class="resp"><?php _e(' <i class="fa fa-tag"></i> Anunciar', 'panamerico'); ?></span>
      </a>

      <div class="account<?php if(osc_is_web_user_logged_in() || 1==1) { ?> has-border<?php } ?>">
        <?php if(osc_is_web_user_logged_in()) { ?>
          <a class="profile tr1" href="<?php echo osc_user_dashboard_url(); ?>"><?php _e('<i class="fa fa-user-o"></i> Minha conta', 'panamerico'); ?></a>
        <?php } else { ?>
          <a class="profile tr1" href="<?php echo osc_user_login_url(); ?>"><?php _e('<i class="fa fa-home"></i> Entrar', 'panamerico'); ?></a>
        <?php } ?>

        <?php if(function_exists('profile_picture_show') && osc_is_web_user_logged_in()) { ?>
          <a class="picture tr1" href="<?php echo osc_user_profile_url(); ?>"><?php profile_picture_show(null, null, 80, null, osc_logged_user_id()); ?></a>
        <?php } else { ?>
          <a class="picture tr1" href="<?php echo osc_user_profile_url(); ?>"><img src="<?php echo osc_current_web_theme_url('images/profile-default.png'); ?>"/></a>
        <?php } ?>
      </div>

      <div class="notification">
        <?php if(osc_is_web_user_logged_in() || 1==1) { ?>
          <?php if(function_exists('im_messages')) { ?>
            <a class="message tr1" title="<?php _e('Mensagens instantâneas', 'panamerico'); ?>" href="<?php echo osc_route_url( 'im-threads'); ?>"><i class="fa fa-envelope-o"></i> <span class="counter"><?php echo $message_count; ?></span></a>
          <?php } ?>

          <a class="alert tr1" title="<?php _e('Alertas', 'panamerico'); ?>" href="<?php echo osc_user_alerts_url(); ?>"><i class="fa fa-bell-o"></i> <span class="counter"><?php echo (osc_is_web_user_logged_in() ? count(Alerts::newInstance()->findByUser(osc_logged_user_id())) : 0); ?></span></a>
          <a class="item tr1" title="<?php _e('Anúncios', 'panamerico'); ?>" href="<?php echo osc_user_list_items_url(); ?>"><i class="fa fa-list"></i> <span class="counter"><?php echo (osc_is_web_user_logged_in() ? Item::newInstance()->countByUserID(osc_logged_user_id()) : 0); ?></span></a>
        <?php } ?>
      </div>

    </div>   
  </div>
</div>
    
asked by anonymous 13.02.2017 / 23:37

1 answer

0

I do not know if this is the best way to solve your problem, but you can do the following:

 *{padding: 0;margin: 0;}
#menu {
  position: fixed;
  width: 100%;
  height: 50px;
  background: #ccc;
  top: 0px;
}
body {padding-top: 50px;}	
<div id="menu">menu</div>
<div>conteudo</div>
    
14.02.2017 / 19:01