Menu above the page

Question

Menu above the page

Asked 7 years, 9 months ago

Viewed 598 times

0

I put the position:Fixed, and the site is up and down the menu, if I insert the position:relative the site is normal, but the menu does not go down with the scroll bar:

code:

#header-bar {position:fixed;top:0;width:100%;background-color:white;padding: 0px 0;-webkit-box-shadow:0 0 2px 0 #1e2648;box-shadow: 0 0 2px 0 #1e2648;z-index:10000;}
#header-bar .inside {display:block;width:100%;max-width:1200px;margin:0 auto;}
#header-bar .left-block {float:left;}
#header-bar .right-block {float:right;}
#header-bar .logo {float:left;}
#header-bar .logo a {float:left;max-width:190px;width:190px;height:40px;position:relative;}
#header-bar .logo img {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:0 0 0 15px;text-decoration:none;float:right;width:40px;padding:8px 0px;text-align:center;line-height:22px;height:40px;font-size:22px;color:#444;background:#eee;border:1px solid #ddd;}
#header-bar .logout:hover {border-color:#bbb;background:#f8f8f8;}
#header-bar .publish {margin:0 0 0 15px;background:#2CC17B;text-decoration:none;color:#fff;float:right;width:auto;text-align:center;padding:11px 13px;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:0 0 0 10px;}
#header-bar .profile {float:left;margin:2px 0 2px 15px;font-size:13px;padding:9px 13px;height:36px;line-height:16px;text-decoration:none;font-weight:500;border:1px solid #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:2px 0 2px 15px;width:36px;height:36px;-webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px;}
#header-bar .picture img {float:left;display:block;width:auto;height:auto;max-width:36px;max-height:36px;-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}
#header-bar .notification {float:right;margin:0;border-right:1px solid #eee;padding:0 25px 0 0;}
#header-bar .notification > a {text-align:center;position:relative;float:left;margin:2px 0 2px 15px;background:#eee;color:#777;font-size:16px;line-height:18px;padding:10px 0;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 > a span.counter {color:#fff;position:absolute;top:-5px;right:-4px;padding:1px 4px;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.message span.counter {background:#E55934}
#header-bar .notification > a.alert span.counter {background:#FA7921}
#header-bar .notification > a.item span.counter {background:#EDD840}
#header-bar .language {float:left;margin:4px 0 4px 20px;}
#header-bar span.info {float: left; clear: both; width: 100%; padding: 8px 6px; line-height: 14px; color: #888; background: #f0f0f0; margin: 0 0 5px 0; 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

<div id="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>

Put html and if possible leave only the Divs that are giving problems to facilitate understanding.

– Jeferson Leonardo

2017/02/13 at 22:41
Done! see if you can help me

– user54225

2017/02/13 at 22:59
from a top:0; left:0;

– Gilmar Santos

2017/02/14 at 00:03
is on top and underneath at the same time???

– mau humor

2017/02/14 at 01:20
When using a fixed menu. It must have a fixed size, and the contents must go back (margin-top) to the menu size.

– mau humor

2017/02/14 at 01:21
tries to see if you have any site element with "z-index" greater than 10000, which is the value that is assigned to the header.

– Ricardo

2017/02/14 at 18:54

Show 1 more comment

1 answer

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.

by Danilo Thiago • **110** points · Answer 1 · 2017-02-14T18:01:36+00:00

I don’t know if it’s 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>