Menu icon Foundation

Developer

My Posts


  • 4
    Replies
  • Why doesn't this grid work?

    By Bill Sholar

    gridstacking

    If I have 4 divs in a row, all coded as <div class="small-6 medium-3 columns"> I would expect one row of 4 columns if on a medium screen, or two rows or two columns if on a small screen, regardless of content. (Especially in a CMS, where another... (continued)

    Last Reply by Snig 8 months ago



  • 15
    Replies
  • Foundation 6 Topbar like F5?

    By Bill Sholar

    topbar

    Trying to puzzle out how to make a topbar in F6 that looks and behaves like it does in F5 -- the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html toggles to the "hamburger" when the window is smaller, but dis... (continued)

    Last Reply by Himanshu Khurana 6 months ago


  • 3
    Replies
  • Topbar small menu styles

    By Bill Sholar

    topbar scss

    If we want the small screen menu, exposed when the "hamburger" is clicked, to have different backgrounds and link colors than we get when the wider screen topbar is displayed. where do we change those styles? Would prefer to change it in the SCSS, but ... (continued)

    Last Reply by Bill Sholar about 2 years ago



  • 2
    Replies
  • Topbar transparency

    By Bill Sholar

    topbartransparency

    I'm trying to use Topbar in a header with an image background. How do I set the background for the links, list items, and topbar to none? (Hover and backgrounds on the dropdowns can remain...) (I did search, and found nothing that worked...) Thanks!

    Last Reply by Bill Sholar over 2 years ago




My Comments

Bill Sholar commented on Bill Sholar's post 10 days

No change, but thanks

Bill Sholar commented on Bill Sholar's post 8 months

Thanks for the message Snig -- what I am actually looking for is 4 columns side by side on medium or larger, and 2 columns side by side on small.
 
It works correctly if the contents of the first column cause it to be equal or shorter than the second column -- it is a float/clearing issue that I thought would be handled by the grid code.

Bill Sholar commented on Bill Sholar's post 9 months

Am I misunderstanding something, or is this a bug?

Bill Sholar commented on Bill Sholar's post about 1 year

Found a fix for this -- add this to your custom CSS:

.menu.expanded { table-layout: auto; }

Bill Sholar commented on Bill Sholar's post about 1 year

I was looking just at your Codepen, which behaves the same as my sites, so it isn't a version issue.

Your revised example leaves a lot less space/padding between the text "two" and the text of the next item than between "one" and "two" - it is keeping the box width equal, as though a table with equally sized TD's, rather that equal spacing of the text.

I am hoping for equal spacing of the text rather than equal width of the boxes.

Bill Sholar commented on Bill Sholar's post about 1 year

Thanks Rafi, but try making one of the menu items much longer and check... The width is unchanged

https://www.dropbox.com/s/n8rxa9yo8q4o6t7/Screenshot%202016-01-18%2018.31.03.png?dl=0

Bill Sholar commented on Bill Sholar's post over 1 year

@Ranier - not quite there yet. Trying to get the subs to work with the output of the CMS's menu builder (to keep clients out of HTML)... that's next.

Bill Sholar commented on Bill Sholar's post over 1 year

@Thomas that seems to work, thanks... @Ranier I added this to a test page and get pretty much what I was looking for:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <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>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>

    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

The only change from the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html was this line:

<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>

Bill Sholar commented on Bill Sholar's post about 2 years

Thanks Shoaib - works great. I used Rafi's SCSS with the style you suggested - works!

For others, here is the scss:

@media #{$small-only} {
.top-bar-section ul li{
background-color: #fff;
}
}

(You'll need to uncomment in _settings.scss the definitions of $small-range, $screen, and $small-only)

Bill Sholar commented on Bill Sholar's post over 2 years

Just downloaded a newer version of the slick code -- no help... :(

Posts Followed

  • 4
    Replies
  • Why doesn't this grid work?

    By Bill Sholar

    gridstacking

    If I have 4 divs in a row, all coded as &lt;div class="small-6 medium-3 columns"&gt; I would expect one row of 4 columns if on a medium screen, or two rows or two columns if on a small screen, regardless of content. (Especially in a CMS, where another... (continued)

    Last Reply by Snig 8 months ago



Following

    No Content

Followers

My Posts








My Comments

You commented on Bill Sholar's post 10 days

No change, but thanks

You commented on Bill Sholar's post 8 months

Thanks for the message Snig -- what I am actually looking for is 4 columns side by side on medium or larger, and 2 columns side by side on small.
 
It works correctly if the contents of the first column cause it to be equal or shorter than the second column -- it is a float/clearing issue that I thought would be handled by the grid code.

You commented on Bill Sholar's post 9 months

Am I misunderstanding something, or is this a bug?

You commented on Bill Sholar's post about 1 year

Found a fix for this -- add this to your custom CSS:

.menu.expanded { table-layout: auto; }

You commented on Bill Sholar's post about 1 year

I was looking just at your Codepen, which behaves the same as my sites, so it isn't a version issue.

Your revised example leaves a lot less space/padding between the text "two" and the text of the next item than between "one" and "two" - it is keeping the box width equal, as though a table with equally sized TD's, rather that equal spacing of the text.

I am hoping for equal spacing of the text rather than equal width of the boxes.

You commented on Bill Sholar's post about 1 year

Thanks Rafi, but try making one of the menu items much longer and check... The width is unchanged

https://www.dropbox.com/s/n8rxa9yo8q4o6t7/Screenshot%202016-01-18%2018.31.03.png?dl=0

You commented on Bill Sholar's post over 1 year

@Ranier - not quite there yet. Trying to get the subs to work with the output of the CMS's menu builder (to keep clients out of HTML)... that's next.

You commented on Bill Sholar's post over 1 year

@Thomas that seems to work, thanks... @Ranier I added this to a test page and get pretty much what I was looking for:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <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>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>

    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

The only change from the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html was this line:

<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>

You commented on Bill Sholar's post about 2 years

Thanks Shoaib - works great. I used Rafi's SCSS with the style you suggested - works!

For others, here is the scss:

@media #{$small-only} {
.top-bar-section ul li{
background-color: #fff;
}
}

(You'll need to uncomment in _settings.scss the definitions of $small-range, $screen, and $small-only)

You commented on Bill Sholar's post over 2 years

Just downloaded a newer version of the slick code -- no help... :(

Posts Followed



Following

  • No Content

Followers

  • No Content