Menu icon Foundation

Designer | Telford

I make websites, take pictures, play video games and east sushi. Wow that sounds stereotypical.

My Posts








My Comments

Jon Friedrich commented on Jon Friedrich's post about 4 years

Unfortunately it still isn't fixed. They are aligned as far as centering goes but they are not the same size.

See here http://imgur.com/akD4P0v

Jon Friedrich commented on Jon Friedrich's post about 4 years

I've implemented the above code but the column widths aren't equal. See page here
http://www.s278616331.onlinehome.us/other%20sites/RD/web-design.html The size difference becomes very noticible when in mobile view and looking at the bottom two images compared to the above ones. Any idea why this is?

Jon Friedrich commented on Jon Friedrich's post about 4 years

Hmm Interesting, with that method, would the top row of 3 items maintain the exast same width rows as the bottom 4? (see image above)

Jon Friedrich commented on Jon Friedrich's post about 4 years

Droideka, yours is also displaying incorrectly, it's just less obvious because the background of the list items is not as wide as my example

Look at the below image again, the Services tab background is not centered behind the word services. It's over to the left.

http://i.gyazo.com/bfa3c05b53bc1bf557b67e0baab47c0b.png

Jon Friedrich commented on Jon Friedrich's post about 4 years

<div class="contain-to-grid sticky">

  <img class="logo" src="img/logo.png">

        <nav class="top-bar" data-topbar>
              <ul class="title-area show-for-medium-down">
                <li class="name">
                  <h1><a href="#"></a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>




          <section class="top-bar-section">

            <ul class="right">
              <li class="active"><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>

              <li><a href="#">Testimonials</a></li>
                     <li><a href="contact.html">Contact</a></li>



            </ul>
        </nav>


</div>

Jon Friedrich commented on Jon Friedrich's post over 4 years

Thank you! I finally got around to working on this.

Jon Friedrich commented on Jon Friedrich's post over 4 years

Thanks! I'm new to Foundation and didn't realize there was a _settings.scss file with all the variables already input! In order to make a change do I just remove the comment & add my custom styles?

I realized _settings.scss wasn't referenced in the mass import list within foundation.scss. Does that matter? Is it referenced elsewhere or do I need to import _settings.scss in that list?

Jon Friedrich commented on Jon Friedrich's post over 4 years

I've downloaded the Github Bower version but it seems to be missing a js./vendor folder and a few other things... I'm getting errors trying to use some of the templaets I made with the CSS version of Foundation. See errors here http://i.imgur.com/HzE3Yl1.png

Jon Friedrich commented on Jon Friedrich's post over 4 years

Fantastic! Thanks everyone

I ended up needing to add

.top-bar.expanded .title-area

for when the menu is expanded in mobile view. Final code is below.

.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button)  { background: green }


Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Jon Friedrich's post about 4 years

Unfortunately it still isn't fixed. They are aligned as far as centering goes but they are not the same size.

See here http://imgur.com/akD4P0v

You commented on Jon Friedrich's post about 4 years

I've implemented the above code but the column widths aren't equal. See page here
http://www.s278616331.onlinehome.us/other%20sites/RD/web-design.html The size difference becomes very noticible when in mobile view and looking at the bottom two images compared to the above ones. Any idea why this is?

You commented on Jon Friedrich's post about 4 years

Hmm Interesting, with that method, would the top row of 3 items maintain the exast same width rows as the bottom 4? (see image above)

You commented on Jon Friedrich's post about 4 years

Droideka, yours is also displaying incorrectly, it's just less obvious because the background of the list items is not as wide as my example

Look at the below image again, the Services tab background is not centered behind the word services. It's over to the left.

http://i.gyazo.com/bfa3c05b53bc1bf557b67e0baab47c0b.png

You commented on Jon Friedrich's post about 4 years

<div class="contain-to-grid sticky">

  <img class="logo" src="img/logo.png">

        <nav class="top-bar" data-topbar>
              <ul class="title-area show-for-medium-down">
                <li class="name">
                  <h1><a href="#"></a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>




          <section class="top-bar-section">

            <ul class="right">
              <li class="active"><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>

              <li><a href="#">Testimonials</a></li>
                     <li><a href="contact.html">Contact</a></li>



            </ul>
        </nav>


</div>

You commented on Jon Friedrich's post over 4 years

Thank you! I finally got around to working on this.

You commented on Jon Friedrich's post over 4 years

Thanks! I'm new to Foundation and didn't realize there was a _settings.scss file with all the variables already input! In order to make a change do I just remove the comment & add my custom styles?

I realized _settings.scss wasn't referenced in the mass import list within foundation.scss. Does that matter? Is it referenced elsewhere or do I need to import _settings.scss in that list?

You commented on Jon Friedrich's post over 4 years

I've downloaded the Github Bower version but it seems to be missing a js./vendor folder and a few other things... I'm getting errors trying to use some of the templaets I made with the CSS version of Foundation. See errors here http://i.imgur.com/HzE3Yl1.png

You commented on Jon Friedrich's post over 4 years

Fantastic! Thanks everyone

I ended up needing to add

.top-bar.expanded .title-area

for when the menu is expanded in mobile view. Final code is below.

.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button)  { background: green }


Posts Followed

No Content

Following

  • No Content

Followers