Menu icon Foundation
Topbar JS help needed

Hi Team! Gale emailed us with a question about topbar JS. Let's help her out!

--

On a mobile navigation <<< ( or laquo; ) the word Back is kind of misleading.

The problem is only on a small screen,

I think it is here:

Foundation 4.3.1.

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


Foundation 5.

        // 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);
      });


            

         

Please help!

I hate to go back to Foundation 4.3.1.

Here is the link to New Version:

http://www.digitalmosaics.net/_k/index.html

Here is the old:

http://drugattorneylv.com/index.html

Many thanks
Gale

topbarjs

Hi Team! Gale emailed us with a question about topbar JS. Let's help her out!

--

On a mobile navigation <<< ( or laquo; ) the word Back is kind of misleading.

The problem is only on a small screen,

I think it is here:

Foundation 4.3.1.

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


Foundation 5.

        // 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);
      });


            

         

Please help!

I hate to go back to Foundation 4.3.1.

Here is the link to New Version:

http://www.digitalmosaics.net/_k/index.html

Here is the old:

http://drugattorneylv.com/index.html

Many thanks
Gale

Ghaida Zahran almost 6 years ago

Hey Rafi,
You can easily add the glyph to the Back button without touching the Javascript at all, and with a couple of simple CSS lines. To do this you'll use the CSS content property to style the back button like so:

.top-bar .back a:before {
  content: "\00ab ";
  margin-right: 4px;
}

Here's the link to a Codepen with the solution:
http://cdpn.io/FImAu

Gale K. almost 6 years ago

Thank you, Ghaida! it worked!
You are my life saver!

All the best,
G.