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

Question

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

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

Have you tried `#content.affix { ... }` ? For setting a direct child, I think you can use the `>` selector, like this: `.affix > .childElements { ... } ` — Geoff James, Jun 21 '16 at 08:35
You would need to apply those classes to the `header` element so that you can target the `#content` using the selectors `header.affix + #content`. CSS doesn't provide a way to start at a specific element (e.g: `.navbar`) and go backwards from there to it's parent to find the next element in the DOM. You'll need javascript for that. — UncaughtTypeError, Jun 21 '16 at 08:42
I added extra information and my screenshot of my page to make it clear for you why I could not add the affix class to 'header' element. — Ehsan, Jun 21 '16 at 08:58
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Shaggy, Jun 21 '16 at 09:06
@Shaggy I have read that question in the first place. I am searching for solution for my specific case. I know there is not any option for selecting parent of an element. But in my case I need to fix it in any case even at the end if I forced I will use JavaScript but I think it is not logical way to solve this problem what seems annoying. Any way thanks for you suggestion — Ehsan, Jun 21 '16 at 09:52
It sounds like you are asking for a fix to a problem that has no solution. — Rob, Jun 21 '16 at 10:12

score 1 · Accepted Answer · answered Jun 21 '16 at 10:40

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/

score 0 · Answer 2 · answered Jun 21 '16 at 08:43

0

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;
 }

answered Jun 21 '16 at 08:43

BenG

14,826
5
45
60

Thanks for you quick help. However, base on my edit 1 and its extra information and screenshot unfortunately I could not added the class affix to 'header' element due to this fact that I want the yellow part would be hidden by scrolling the page and the 'navbar' will remain in top. – Ehsan Jun 21 '16 at 09:00

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

2 Answers2