Menu icon Foundation
Space Between DIVs, Changing Colour of Navigation

Hi Guys

1. Is there a code (class) that can create a space between two vertical "divs"? I have tried "clearfix" it doesn't work. Please see attached picture for further clarifications

2. Notice the second image, how the logo is now on the next div (banners)!!!

3. I also need to change the colour of the top navigation from balck to white while the text colours will be in black. I already wrote few custom codes but only half of the navigation changed (see custom CSS below)

<div class="large-8 medium-8 columns">
            <div class="white-bgr padding-general">
                <img src="img/dr_chris_williams.png">
                <p class="paddingTop-15">
                Hello, my name is Dr Chris Williams. I just want to use this opportunity to welcome you to our website. Thank you so much for using this opportunity to check up on us. I believe that your encounter with us today will impact you tremendously. The website is deliberately designed to make your stay very comfortable, pleasurable and informative. In Headstone our vision byline is <em>maximizing lives</em>. By that we desire that everybody who encounters us becomes their most and their best in God. As you interact with us today, I believe that you will come across something that will position you to be better in Jesus name. Please do not forget to drop us a word of <a href="#">testimony or prayer point</a>. Happy stay!
                </p>
            </div>
            <div class="dark-purple-bgr padding-general">
            	<h3 class="white-colour">Message of the month</h3>
            	<div class="flex-video">
                	<iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>

Clear

Overla

<!-- Navigation Code here -->
<div class="contain-to-grid">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
          <a href="#"><img src="img/headstone_church.png"></a>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
      <ul class="right">
      	<li><a href="#">HOME</a></li>
        <li class="has-dropdown"><a href="#">ABOUT US</a>
          <ul class="dropdown">
            <li><a href="#">The Ministry</a></li>
            <li><a href="#">Dr. Chris &amp; Funmi Williams</a></li>
            <li><a href="#">Our 12 Point Dream</a></li>
          </ul>
        </li>
        <li><a href="#">MINISTRY</a></li>
        <li class="has-dropdown"><a href="#">MEDIA</a>
          <ul class="dropdown">
            <li><a href="#">Audio Messages</a></li>
            <li><a href="#">Vidoe Messages</a></li>
            <li><a href="#">Photo Gallery</a></li>
          </ul>
        </li>
        <li class="has-dropdown"><a href="#">FEEDBACK</a>
          <ul class="dropdown">
            <li><a href="#">Prayer Request</a></li>
            <li><a href="#">Testimonies</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>

<!--Banners Here -->

<section class="dark-purple-bgr">
    <div class="row">
        <img src="img/sample_banner.jpg">
    </div>
</section>

         

.contain-to-grid, .top-bar, .top-bar-section ul li { background-color:#fff; }
            

         

spaceClearclearfixseperate divsoverlap

Hi Guys

1. Is there a code (class) that can create a space between two vertical "divs"? I have tried "clearfix" it doesn't work. Please see attached picture for further clarifications

2. Notice the second image, how the logo is now on the next div (banners)!!!

3. I also need to change the colour of the top navigation from balck to white while the text colours will be in black. I already wrote few custom codes but only half of the navigation changed (see custom CSS below)

<div class="large-8 medium-8 columns">
            <div class="white-bgr padding-general">
                <img src="img/dr_chris_williams.png">
                <p class="paddingTop-15">
                Hello, my name is Dr Chris Williams. I just want to use this opportunity to welcome you to our website. Thank you so much for using this opportunity to check up on us. I believe that your encounter with us today will impact you tremendously. The website is deliberately designed to make your stay very comfortable, pleasurable and informative. In Headstone our vision byline is <em>maximizing lives</em>. By that we desire that everybody who encounters us becomes their most and their best in God. As you interact with us today, I believe that you will come across something that will position you to be better in Jesus name. Please do not forget to drop us a word of <a href="#">testimony or prayer point</a>. Happy stay!
                </p>
            </div>
            <div class="dark-purple-bgr padding-general">
            	<h3 class="white-colour">Message of the month</h3>
            	<div class="flex-video">
                	<iframe width="420" height="315" src="//www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>

Clear

Overla

<!-- Navigation Code here -->
<div class="contain-to-grid">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
          <a href="#"><img src="img/headstone_church.png"></a>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
      <ul class="right">
      	<li><a href="#">HOME</a></li>
        <li class="has-dropdown"><a href="#">ABOUT US</a>
          <ul class="dropdown">
            <li><a href="#">The Ministry</a></li>
            <li><a href="#">Dr. Chris &amp; Funmi Williams</a></li>
            <li><a href="#">Our 12 Point Dream</a></li>
          </ul>
        </li>
        <li><a href="#">MINISTRY</a></li>
        <li class="has-dropdown"><a href="#">MEDIA</a>
          <ul class="dropdown">
            <li><a href="#">Audio Messages</a></li>
            <li><a href="#">Vidoe Messages</a></li>
            <li><a href="#">Photo Gallery</a></li>
          </ul>
        </li>
        <li class="has-dropdown"><a href="#">FEEDBACK</a>
          <ul class="dropdown">
            <li><a href="#">Prayer Request</a></li>
            <li><a href="#">Testimonies</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</div>

<!--Banners Here -->

<section class="dark-purple-bgr">
    <div class="row">
        <img src="img/sample_banner.jpg">
    </div>
</section>

         

.contain-to-grid, .top-bar, .top-bar-section ul li { background-color:#fff; }
            

         
Bob Sawyer over 4 years ago

Have you tried margin?

.padding-general { margin-bottom:10px; }

Samson Adeyemi over 4 years ago

Usually, I always create margins and paddings for my project, but since its my first time working with zurb foundation, I was thinking there could be something like "clear" that will prevent two divs coming tightly close, since there are none for now, i'll stick with my previous style.

@Bob Sawywe Thanks

Rafi Benkual over 4 years ago

We like to use bottom margin on our sections. I personally avoid using classes for presentational things like margin, color, padding etc.

In my opinion - It's best to name your sections then apply styles to that.

Example:

<section class="product-intro">
  <!-- content -->
</section>
.product-intro {
  margin-bottom: 1rem;
}

Samson Adeyemi over 4 years ago

Not sure i'd want to write several classes for every section BUT you idea was good and useful.

Appreciate!