3

I'm coming from Ed's answer (https://stackoverflow.com/a/14141798) regarding the usage of foundation classes in order to get an fixed navigation which contains to the grid. Each attempt to use these classes together with class="contain-to-grid fixed" as described in the Foundation documentation "Positioning the Bar" is not working. .contain-to-grid and .fixed is working only when it's used separately in one after another div-elements, please compare with my code below. Is that a known issue vs. the documentation/behaviour or is there anything wrong with my markup?

And here's the code from http://frickeln.jensfreyer.de/blog/

Edit: I had submitted a (not working) version of my markup first; that version was online, too (and appeared mistakenly not fixed). But I updated to the current with separated class assignments for .contain-to-grid and .fixed. as a basis for my question: 

<header>
  <div class="row">
    <div class="large-12 columns">               
      <div class="contain-to-grid">
        <div class="fixed">           
          <nav class="top-bar" data-topbar role="navigation">
            <ul class="title-area">
              <li class="name">
                <h1> 
                  <txp:link_to_home> 
                    <txp:site_name /> 
                  </txp:link_to_home>            
                </h1>
              </li>
              <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
            </ul> 
            <section class="top-bar-section">
              <ul class="right">
                <li class="devider"></li>
<!-- Navigation, Menü 1 -->
                <li><txp:section link="1" title="1" name="blog" /></li>                                                                       
                <li class="divider"></li>
<!-- Navigation, Menü 2 -->

(...)

              </ul>
            </section>
          </nav>
        </div> 
      </div>                
    </div>
  </div>
</header>

Edit: the markup above shows how the formatting is WORKING: the navigation bar fits to the grid and remains fixed at the top of the site.

I would like to emphasize the issue I have, after some help from @r8n5n: the behaviour of the markup is different (NOT WORKING as expected though described from Foundation, "Positioning the Bar", cp. above) when I try to combine the classes in one div: 

<header>
  <div class="row">
    <div class="large-12 columns">               
      <div class="contain-to-grid"> <!-- <= it's WORKING with two div elements -->
        <div class="fixed">           
          <nav class="top-bar" data-topbar role="navigation">

(...)

<header>
  <div class="row">
    <div class="large-12 columns">               
      <div class="contain-to-grid fixed"> <!-- <= and it's NOT WORKING with two classes together -->          
        <nav class="top-bar" data-topbar role="navigation">

(...)

I'm using Foundation 5.5.2 and Textpattern 4.5.7.

Community
  • 1
  • 1
jensf
  • 33
  • 6

2 Answers2

2

You need to wrap the navigation with the fixed class. Move the fixed class to the contain-to-grid div. i.e.

<div class="contain-to-grid fixed"> 
   <nav class="top-bar" data-topbar role="navigation">
    ...
   </nav>
</div>

This will make the nav bar 'sticky'.

r8n5n
  • 2,059
  • 17
  • 23
  • Thanks for your comment! I changed the markup to the correct version which is already online. (I had first published my last (failed) try to add .fixed to .top-bar class. But without success...) So, it's working [that way](http://frickeln.jensfreyer.de/blog/). **But** when I try to combine the classes as you mentioned in your answer it fails. The navigation will not be set to the grid width anymore. – jensf Sep 16 '15 at 11:44
  • Looking at the site is seems to be working fine. The top bar is not the full width of the page, where as it would be if you were not using the 'contain-to-grid' class. – r8n5n Sep 16 '15 at 12:36
  • I agree... as far as I do the markup with two **different** div elements as shown above. But as soon as I use the two classes _together_ with class="contain-to-grid fixed", the top bar has the full width of the page. I changed to markup for the site [online](http://frickeln.jensfreyer.de/blog/). – jensf Sep 16 '15 at 13:16
  • This seems to be because there is a background colour on the contain-to-grid class. .contain-to-grid { width: 100%; background: rgba(52,52,52,0.8); } – r8n5n Sep 16 '15 at 14:35
  • Yes, that's why I tried something different in order to show opacity on screens with a width of < 900px. But a background color is given for .contain-to-grid by default Foundation template with background: #333333. I reset the value to this initial one for my site in the meanwhile. So, I guess this attribute does not cause the issue that the content does not fit with the grid... – jensf Sep 16 '15 at 20:23
  • ...or better: it SHOULD not when the classes were used together (class="contain-to-grid fixed") because as soon as I use two seperate div elements for the two classes - as shown in my first markup above - it's working and the content fits to the grid. – jensf Sep 17 '15 at 05:43
0

Looks like the markup on the docs is correct - http://codepen.io/rafibomb/pen/WQGaep?editors=110

<div class="contain-to-grid fixed"> 
  <nav class="top-bar" data-topbar role="navigation">

What behavior were you expecting that you are not seeing? Maybe it's a confusion on what contain to grid does?

rafibomb
  • 545
  • 3
  • 5
  • Thanks for your comment. I expect the same behavior as if I use **two** div elements for .contain-to-grid and .fixed. The content is shown in the center of the page only. Or with other words: the navigation does _not_ have the whole witdh of the browser. I'll try to show this with a jsfiddle... – jensf Oct 21 '15 at 16:46
  • Finally, I modified your CodePen example to show the different behavior with different
    elements for .contain-to-grid and .fixed: http://codepen.io/anon/pen/RWQPMa?editors=110 - what do you think?
     – jensf Oct 29 '15 at 10:29