Menu icon Foundation
Top-bar and xy-grid

Hey, 

im testing xy-grid at the moment... but dont get the top-bar working inside grid...anyone can point me to the right solution? :)

 

Below you find an example what im targeting on^^

 

Thanks for your help

Should look like this

xy-grid top-bar

Hey, 

im testing xy-grid at the moment... but dont get the top-bar working inside grid...anyone can point me to the right solution? :)

 

Below you find an example what im targeting on^^

 

Thanks for your help

Should look like this

Rafi Benkual about 1 year ago

 Not sure what the issue is you are asking about?, can you share a live example or a codepen?

Jack Keenan about 1 year ago

I also couldn't find a nice solution to do this with the new grid. 

One work around could be to add a div with the same width as your grid (i.e 1200px) and then center it.

This will give the desired effect 

CSS:

.contain {
    width: rem-calc(1200);
    margin: 0 auto;
}

HTML:

   <div class="top-bar">
      <div class="contain">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Site Title</li>
                <li>
                    <a href="#">One</a>
                    <ul class="menu vertical">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
      </div>
    </div>

Roy Six about 1 year ago

You can use the new xy-grid's `grid-container`class. It's similar to the old "row" class in the legacy float grid. This will contain it with a max-width and center it:

 

.grid-container {
  max-width: 75rem;
  margin: 0 auto; }

 

Of course, you could also do it Jack's way if you want to define your own container with your own specs.

Alex Schenk 12 months ago

I ran into this and tried Roy's answer. It fenced in the top bar elements nicely, but also held in the top bar color.

To fix this I added a div on the outside of the top bar to hold just the color. (Inline style for simplicity of example.)

<div style="background-color: red; width: 100%;">
    <div class="top-bar">
        <div class="top-bar-left">
            ...
        </div>
        ...
    </div>
</div>

Dustin Harrell 12 months ago

Roy Six has the correct answer.  It appears that the contain-to-grid class no longer works.  Wrap your top bar markup in a div with the class grid-container and you shouldn't have any issues.

Yun 11 months ago

I was facing the same problem and found a probably clean solution. But I am not sure whether it has some side effect.

<div class="top-bar">
  <div class="grid-container" style="flex-grow:1;">
    <div class="grid-x">
      <div class="top-bar-left">
        ......
      </div>
      <div class="top-bar-right">
        ......
      </div>
    </div>
  </div>
</div>

 

Christoffer Karlsson 11 months ago

I tried the solutions from Jack Keenan and Roy Six, but neither worked when using both "top-bar-left" and "top-bar-right". Things don't get stacked to left and right at max width, as in the image posted by Markus Lind, and they get stacked on top of each other even though the width is below 1200px.

The solution posted by Yun seems to work though!

Roy Six 11 months ago

Christoffer, apologies, I did it in a different way, so there was no need to adjust the flex on the grid-container, but I really like Yun's solution. My solution was similar to Alex's: I had an outer div that contained everything for background styling, and I had the grid-container contain the entire top-bar. However, I think Yun's solution is more elegant.

<div style="background-color: #e6e6e6;">
  <div class="grid-container">
    <div class="top-bar" style="background-color: inherit;">
      <div class="top-bar-left">
        Left Top Bar
      </div>
      <div class="top-bar-right">
        Right Top Bar
      </div>
    </div>
  </div>
</div>

 

Kevin Neal 11 months ago

I was doing it the same as Yun, but noticed the flex grow doesn't work on IE10 - that might not be a deal breaker but worth baring in mind

Raymond Chee Weng Lein 10 months ago

 How about adding a "fluid" class on the extra <div>?

<div class="grid-container fluid" style="background-color: #e6e6e6;">
    <div class="grid-container">
        <div class="top-bar" style="background-color: inherit;">
          <div class="top-bar-left">
            Left Top Bar
          </div>
          <div class="top-bar-right">
            Right Top Bar
          </div>
        </div>
    </div>
</div>

Lemme know too if this way has any unusual or unwanted effect as I'm new to foundation.

 

Thanks in advance!

Marvin Pyles 6 months ago

Can anyone for Zurb respond on doing this in an official manner?  This is an extremely common Use case. 

Below is a codepen that represents what all is discussing, but using the old grid. 

https://codepen.io/brettsmason/pen/adbYXV

 

 

Thanks in advance.