Thanks for the article Rafi. Very interesting and really very innovative.

Perhaps, just what you might simplify around a little to your needs, Sam.

Regards,

Bit

Hi,

Thanks for clarifying the situation and as Rafi already explained sass variables have this limitation.

Nevertheless, I made a site for my travel agency some time ago and in that each itinerary is very different from each other. Unfortunately, the site is not responsive and that is what I am doing right now – rebuilding/reorganizing it using the Foundation Framework, but the principle and process will remain the same.

I have a MySQL database am using PHP to pull all attributes required for the individual pages. Depending upon the URL, PHP fills all the required attributes into a simple template which has only a background with height and width and produces the page/s within a fraction of a second. All the attributes like color, backgrounds, headings, header-images etc. (anything required) are stored in the DB. PHP creates Record Sets and these can then be dialed-in to any page as “editable attributes”.

I work mostly in Dreamweaver where making templates is a very easy process. In versions 6 and below it had all the databases, bindings, server behaviors in-built into the application, but they removed these in DW CC, but can still be accessed as extensions.

This is how I solved my problem to display unique non-stereotyped pages and came to have a unique CMS like setup. If you care to have a look: http://venture-wilderness.com/indexD.php. This is the only responsive page on the site. You would have to login to go a level deeper..

Regards,

Bit

Don't you have the _settings.scss file?

I changed the color there for my top-bar as follows:

// Background color for the top bar
$topbar-bg-color: /*$oil*/$earth;
// $topbar-bg: $topbar-bg-color;

I defined $earth under the list of colors above like this:

// $steel       : #666666;
// $charcoal    : #555555;
// $tuatara     : #444444;
// $oil         : #333333;
// $jet         : #222222;
// $black       : #000000;
$earth      : #9A9786;

Thus all I have to do is to comment out the not needed scheme. I thus have 2 or so many colors as I want to have.

Unless I misunderstood your question, I think you could help yourself likewise..

Regards,

Bit

If you are using Foundation 5.5.2 (always give the exact version as Foundation is always developing and optimizing) then go to the rules under line 1695:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:58.75em)/";
  width: 58.75em; }

This is showing the present breakpoint width. You need to replace with your desired width.

In addition to this you must also change it on line 2041:

@media only screen and (min-width: 58.75em) {

to the same as above.

You should also do a search before posting a question as this has been asked and answered many times before. There is a small box in right column (where your question appears) for doing this.

I simply changed "medium" to "top-bar-desktop" in the foundation.topbar.js and that is working quite efficiently!

Best regards,

Bit

That is exactly what I mean.

In the meanwhile I checked the foundation.topbar.js and that is where it has been specified:

  // Pull element out of the DOM for manipulation
      section.detach();

      self.S('.has-dropdown>a', section).each(function () {
        var $link = self.S(this),
            $dropdown = $link.siblings('.dropdown'),
            url = $link.attr('href'),
            $titleLi;

        if (!$dropdown.find('.title.back').length) {

          if (settings.mobile_show_parent_link == true && url) {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
          } else {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
          }

          // Copy link to subnav
          if (settings.custom_back_text == true) {
            $('h5>a', $titleLi).html(settings.back_text);
          } else {
            $('h5>a', $titleLi).html('&laquo; ' + $link.html());
          }
          $dropdown.prepend($titleLi);
        }
      });

settings.mobile_show_parent_link == true && url

I suppose this needs to be changed.

Thank You,

Bit

Hello Rafi,

Thank you for the input, but I wasn't asking about the top-bar breakpoint. When the view-port is foundations default 40em and then you open the collapsed top-bar. Now, when any of menu items have sub-menus and you click it open, it shows the menu and it's sub-menus. But when the breakpoint has been increased and is more than 40em, it does not show the menu; it shows only the sub-menus without showing the menu they belong to. I would like to change it so it shows the menu as well as the sub-menus even when the toggle width has been increased.

[I wish there was someway to show image/s in a reply post as there are no options to do that when making a reply. One can do it when creating a post, but that option is no longer accessible.]

The link you posted refers to more than one year old solutions, but as you know a lot of water has flowed down the bridge since.

// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: 64rem !default; //#{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
//$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

I had to do it this way. And this is because the media query maps have changed since and need to be tampered with if we want Grunt to accept any changes using the previous solutions. At least for me it worked that way without having the "swine grunting all the time".

Regards,

Bit

I think you beat me by just a few seconds!!!

Bit

Please don't bother!

It is version 5.5.2 ! One can look it up under bower components / foundation/CSS/foundation.css ..

Thank you

Hello Rafi,

Many thanks for having a look..

I entered the .ui-tabs height to the existing .ui-tabs in jquery.ui.tabs.min.css.

Yes, the columns are theoretically of the same height, but I would like these to be visually also the same, i.e. I would like the bottom outlines of both the sidebar and the main-content to line up. I suppose I would have to apply the "data-equalizer-watch" to some other element. I tried on some other variations, but visually it remains the same. [sigh!]

One other thing I noticed is that when I refresh the page it reverts to the first Tabs on both sides. Is there a way to keep the open tabs as they are when refreshing? And is there a way to place a set of tabs or links at the bottom of the content so that you don't have to scroll to the top to change the tab?

Thank you so much for the wonderful "footer"; it works so beautifully and with so little code!