Menu icon Foundation

My Posts


  • 3
    Replies
  • Abide validate non-required fields

    By Adrian K

    abide

    I have a form with a optional twitter and linkedin input which shows required / turns red like the other input without having pattern or required. I have searched around but all the post say remove pattern, there is no pattern attached to the input to ... (continued)

    Last Reply by Jacky888 11 months ago





My Comments

Adrian K commented on Mercer's post over 5 years

Thanks!! for the help :D, i tried it out it works the auto close, then it glitches.

Have a look at it might give you better understanding hard to explain.

The Off-canvas fixes itself on top then when i open it it goes back to its position the anchor tag does not move to the div im targeting to.

http://whitemassif.com/wm7832/

the off-canvas triggers after 1000px.

Adrian K commented on Mercer's post over 5 years

I have same question as Jason, i want know to know if there is a way to have off-canvas fixed or sticky or autoclose once the anchor tag is clicked.

The position bar does not work it just fixes the Off-canvas Nav , but not the slide out menu.

<div class="off-canvas-wrap">
      <div class="inner-wrap">


          <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list links">
              <li><label class="first">Menu</label></li>
              <li><a href="#home">Home</a></li>
              <li><a href="#what">What We Do</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>  
          </aside>


          <nav class="tab-bar hide-for-large">

            <section class="left-small">
              <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>

            <section class="right tab-bar-section">
              <h1 class="title ">Adrian</h1>
            </section>

          </nav>  
<div id="home"> <!---Content---> </div>
<div id="what"> <!---Content---> </div>
<div id="about"> <!---Content---> </div>
<div id="services"> <!---Content---> </div>
<div id="blog"> <!---Content---> </div>
<div id="contact"> <!---Content---> </div>


  <a class="exit-off-canvas"></a>

      </div>
    </div>  



```Javascript 

 ```$(document).ready(function() {

  $(".links a").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top - "50"
    }, {
      duration: 700,
      easing: "swing"
    });
    return false;
  });



});

Adrian K commented on Mercer's post over 5 years

I'm sorry but can you paste the code again please, the menu part.

<!--for fixed off-canvas menu stay on the top -->

Menu

<!-- Here Your Content -->

Adrian K commented on Mercer's post over 5 years

ok dont know why i didnt try this before -

you can add class sticky to div before nav and get it to stick but it jumps. and the side fly out navigation will not stick.

still looking for a way to get fly out menu to stick and auto close, tried adding nav for off-canvas-menu and sticky does not work.

 ``` <div class="sticky">
          <nav class="tab-bar hide-for-large">

            <a class="left-off-canvas-toggle menu-icon">
              <span>Menu</span>
            </a>

          </nav>  
        </div>

Adrian K commented on Mercer's post over 5 years

sorry for hijacking - Im also looking for something around the same line, if anyone knows how please share.

Tried Sticky and Fixed both caused the medium-up screens to be locked on to top of the page and without auto close it leaves a big tall side navigation.

Adrian K commented on Peter Graff's post over 5 years

try adding ' Hide-for-large' class instead, had same issue seems to be working fine for me now.

Posts Followed

No Content

Following

    No Content

Followers

My Posts




My Comments

You commented on Mercer's post over 5 years

Thanks!! for the help :D, i tried it out it works the auto close, then it glitches.

Have a look at it might give you better understanding hard to explain.

The Off-canvas fixes itself on top then when i open it it goes back to its position the anchor tag does not move to the div im targeting to.

http://whitemassif.com/wm7832/

the off-canvas triggers after 1000px.

You commented on Mercer's post over 5 years

I have same question as Jason, i want know to know if there is a way to have off-canvas fixed or sticky or autoclose once the anchor tag is clicked.

The position bar does not work it just fixes the Off-canvas Nav , but not the slide out menu.

<div class="off-canvas-wrap">
      <div class="inner-wrap">


          <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list links">
              <li><label class="first">Menu</label></li>
              <li><a href="#home">Home</a></li>
              <li><a href="#what">What We Do</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>  
          </aside>


          <nav class="tab-bar hide-for-large">

            <section class="left-small">
              <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>

            <section class="right tab-bar-section">
              <h1 class="title ">Adrian</h1>
            </section>

          </nav>  
<div id="home"> <!---Content---> </div>
<div id="what"> <!---Content---> </div>
<div id="about"> <!---Content---> </div>
<div id="services"> <!---Content---> </div>
<div id="blog"> <!---Content---> </div>
<div id="contact"> <!---Content---> </div>


  <a class="exit-off-canvas"></a>

      </div>
    </div>  



```Javascript 

 ```$(document).ready(function() {

  $(".links a").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top - "50"
    }, {
      duration: 700,
      easing: "swing"
    });
    return false;
  });



});

You commented on Mercer's post over 5 years

I'm sorry but can you paste the code again please, the menu part.

<!--for fixed off-canvas menu stay on the top -->

Menu

<!-- Here Your Content -->

You commented on Mercer's post over 5 years

ok dont know why i didnt try this before -

you can add class sticky to div before nav and get it to stick but it jumps. and the side fly out navigation will not stick.

still looking for a way to get fly out menu to stick and auto close, tried adding nav for off-canvas-menu and sticky does not work.

 ``` <div class="sticky">
          <nav class="tab-bar hide-for-large">

            <a class="left-off-canvas-toggle menu-icon">
              <span>Menu</span>
            </a>

          </nav>  
        </div>

You commented on Mercer's post over 5 years

sorry for hijacking - Im also looking for something around the same line, if anyone knows how please share.

Tried Sticky and Fixed both caused the medium-up screens to be locked on to top of the page and without auto close it leaves a big tall side navigation.

You commented on Peter Graff's post over 5 years

try adding ' Hide-for-large' class instead, had same issue seems to be working fine for me now.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content