Menu icon Foundation
Responsive header

By resizing the home page one can easily notice the the scrolling banner images and the top navigation header have issues.  I can seem to locate in the CSS where I should make adjustment.  Can some one help me please?

http://melhartindustries.com/index.php

Thank you,

Lee

navigation

By resizing the home page one can easily notice the the scrolling banner images and the top navigation header have issues.  I can seem to locate in the CSS where I should make adjustment.  Can some one help me please?

http://melhartindustries.com/index.php

Thank you,

Lee

Ryan Patterson 19 days ago

Hi Elisandro,

 

For the navigation issue, you may just need to have to switch to the mobile menu sooner and remove the absolute positioning on your logo. Since i would have coded the top bar differently, As of now, I can't easily say how to fix the behavior the way you have it setup now. You should check into the top bar docs at http://foundation.zurb.com/sites/docs/top-bar.html

For the slide issue, this is happening because you are placing an image in the slide and then overlaying a div on top. The image is going to scale proportionately when resizing. So as the screen gets narrower, the image will get smaller and smaller, both vertically and horizontally. This is because Foundation adds max-width: 100%, height: auto; to the image tag. This is the standard way to handle images to be responsive. 

What you will want to do is set the image as a background image to the slide, not actually placing the image in the slide using <img> tag. 

Whether you do inline, or specifically set the image in css, you will want to use background-image: url('image-path'); background-size: cover; background-repeat: no-repeat; background-position: center center; (you can adjust positioning to whatever you prefer).

 

So for an example with your slider, one <li> may look like this: 

 

 

<li class="orbit-slide is-active" style="background-image: url('images/installations/container4.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
          <div class="caption">
          <h1>National Distributor &amp; Manufacturer</h1>
          <h3>of Music Instrument Storage &amp; Related Equipment</h3>
          </div>
</li>

or you could do in css like: 

 

 

HTML

<li class="orbit-slide is-active" id="slide-1">
          <div class="caption">
          <h1>National Distributor &amp; Manufacturer</h1>
          <h3>of Music Instrument Storage &amp; Related Equipment</h3>
          </div>
</li>

CSS

#slide-1 {
   background-image: url('images/installations/container4.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

 

If you use one of these methods, you will also no longer need to absolutely position the text. 

 

Hope that helps.

Elisandro Martinez 18 days ago

Ryan,

Thank you for the great advice it is very helpful.  What is is frustrating is that Foundation does not provide much in the way of placing a logo in the header section.  Can you provide some advice on that please?

Thank you,

Elisandro

Val Ery 14 days ago

 Hi Elisandro!

Lay out please sketches of how it should look for small and large screens. Then it will be easier to find the best solution for you.
At the moment I don't understand:
1) why do you use top-bar,
2) if you use top-bar, then why divide it into the right and left?
Look at this example of including a logo - https://codepen.io/Val_Ery/full/OgNoRO/

Hope that helps :)

Elisandro Martinez 11 days ago

 Hi Val,

I use top bar because it is used in the building block that I am using for the top navigation.  I just want to know how to do the following:

Place the logo at the top left with the logo overlapping the navigation section and extending over the slider that I will add later.

Make the navigation links switch to responsive once "Storage Solutions" touches the logo.  I like the way your logo stacks beneath the links when the browser width is decreased.

I don't understand why Foundation makes it so difficult to accomplish this simple design.

 

Thank you,

Elisandro

Val Ery 11 days ago

 Hi Elisandro!

I understood...
Everything is not as difficult as it seems. With the right approach.
In your case, you need
1) know the width of all the elements in the right top-bar (for example, 71em), including the "Storage..." item.
2) add your own breakpoint (docs), in which to write the rules for the blocks.

@media screen and (max-width: 71em) {
  .title-bar {
  ...
  }
  .top-bar {
  ...
  }
}

But this approach involves making a large number of changes. It's not just "display: none;"/"display: block;".

The easiest way to do this is to use the sass version. And this is the right way. Because you can use the full power of the framework. You just need to specify the width of the screen. The rest will be done by the framework itself:

In settings.scss add new breakpoint. In ex. I added a point 'custom-width'

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  custom-width: 1136px,
  xlarge: 1200px,
);
$breakpoint-classes: (small medium large custom-width xlarge);

Now you can use the attribute data-hide-for="custom-width"

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="custom-width">
  <button class="menu-icon" type="button" data-toggle></button>
</div> 

I'm using the command line interface. Therefore, adding an additional breakpoint takes 3 seconds. Foundation itself does the rest :)

Marie Wallin 9 days ago

Mr Patterson - thanks for sharing this codes!

John Show 9 days ago

I think you have turn to documentation or supports, its really can help. When i had problem with encapsulation i found few tips in case study service, and tutorials how to use documentation