CODEWITHSUNDEEP
csstwitter-bootstrapcss-selectors
Ehsan
Ehsan

Reputation: 396

Switching bootstrap affix and affix-top class by scrolling make the elements below navbar move upward

By looking through this example of W3schools

How To Create an Affixed Navigation Menu

You will find the reason behind this line of code

.affix + .container-fluid {
  padding-top: 70px;
 }

like this: after we set up a navbar element in bootstrap by scrolling the class named affix-top will change to affix by switching this two class we will see that the elements after navbar will scroll to top according to the heights of the navbar and this is because the position of navbar will change to absolute and the elements bellow it will move upward. To avoid this happening we added padding-top for the element exactly after the navbar with class affix. My question is if I have no element after the navbar as sibling, how should I select the next element exactly after the parents element of navbar with class affix

My code is like this:

<header id="masthead" class="header">
<div class="info-wrap">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left info">
        <span class="phone">

        </span>
        <span class="email">

        </span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-right auth">
        <span class="add-property-link-container">

        </span>
      </div>
    </div>
  </div>
</div>
<div id="nav-container-realestate">
  <nav class="navbar navbar-default affix-top" data-spy="affix" data-offset-top="40">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu_navbar" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://localhost/areal">
                          <img src="http://localhost/areal/wp-content/uploads/2016/05/apadana-logo.png" srcset="" sizes="(max-width: 174px) 85vw, (max-width: 174px) 81vw, (max-width: 174px) 88vw, 174px" width="128" height="50" alt="AmirEstate">
                      </a>
        <span class="navbar-brand-title">
                        Apadana <span class="navbar-brand-title-gray">Real Estate Agency</span>
        </span>
      </div>
      <div class="collapse navbar-collapse" id="main_menu_navbar">
        <ul id="menu-test" class="nav navbar-nav navbar-right">
            <li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11">
                <a title="About Us" href="http://localhost/areal/about-us/">About Us</a>
            </li>
            <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
                <a title="Contacts" href="http://localhost/areal/contacts/">Contacts</a>
            </li>
            <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
                <a title="Blog" href="http://localhost/areal/blog/">Blog</a>
            </li>
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-14 active">
                <a title="Home" href="http://localhost/areal/">Home</a>
            </li>
        </ul>
       </div>
    </div>
  </nav>
</div>
</header>
<div id="content">
   content of the page
</div>

And I want to set the padding for div with id content when the navbar has class affix

Thanks in advance

Edit 1:

To make my desire more clear I will add an screenshot from my underdevelop page my page header is the yellow part and the navbar

'' is a container for both yellow 'div' with class 'info-wrap' at top and 'navbar' after it.

If I scroll I will see that the background image which is the property of content is stepping upward by changing the class 'affix-top' to 'affix'

Edit 2

Guys I want to inform you that I am not asking that could I use the CSS Selector to get the parent of and element. My question is in my code how to fix the problem of stepping upward of element after the 'header' element in case using bootstrap affix and have not element sibling to the 'navbar'. Actually my I stop but not having the ability of getting the parent element in CSS and I want any alternative specific escape way of this problem. Again thanks for your help. I am looking forward to get more help from you.

Upvotes: 1

Views: 2661

Answers (2)

user4994625
user4994625

Reputation:

And if you put the padding to the #content always? then you set absolute:position to .affix-top and relative to his parent for maintain in his place.

.nav-container-realestate {
  position: relative;
}

.affix-top {
  position: absolute;
  width: 100%;
}

.affix {
  top: 0;
  width: 100%;
}

#content {
  padding-top: 70px;
}

DEMO: https://jsfiddle.net/blonfu/9z683r2n/2/

Upvotes: 1

BenG
BenG

Reputation: 15154

This is not possible with css as you need to go up from affix to it parent twice before going to the sibling. css only allows you to cascade downwards.

You would be best toggling the class up a level or 2.

for example, on body 

.affix .container-fluid {
  padding-top: 70px;
 }

.affix .content {
  padding-top: 70px;
 }

Upvotes: 0

Related Questions