Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Need to add padding to top of headers

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #41886
    DesignLady94
    Member

    Hi, I’m trying to add padding to the top of the h1 and h2 headers at this site when they are clicked. When the navbar is collapsed (i.e. < 980px) padding is added. But when the navbar is full width, it is not. debbierking.com/bootstrap I tried this script, but it’s not working $(document).ready(function() {
    $(‘.nav li a’).click(function() {
    $(‘h1, h2’).appendTo(‘.toppad’);
    });
    });

    CSS:

    .toppad {
    margin-top: 25px;
    }

    I tried to set this up in codepen, but when I click the links, the content disappears.

    http://codepen.io/anon/pen/BiIln

    #120457
    DesignLady94
    Member

    Thanks Josh! That works great! I originally started with addClass but when it didn’t work, switched to AppendTo…I had some other things wrong in the code though, which I have since fixed.

    Once again, though I need this only to work for 980px and higher as Bootstrap appears to already add top padding to the headers when the nav bar is collapsed. I tried using some of the code from the other script you are helping me with (removing the Overlay function) but that didn’t work.

    #120534
    DesignLady94
    Member

    Just can’t get the width thing to work…this removes all the padding for all widths…Tried a variation of this yesterday with the same result.

    #120605
    DesignLady94
    Member

    Looks like this is resolved, thanks to an answer posted here:
    http://stackoverflow.com/questions/7306933/how-to-detect-window-size-and-then-do-something-with-jquery-switch-statement.

    Thanks so much for your help!

    $(document).ready(function() {
    var width = $(window).width();
    if (width > 979 ) {
    $(‘.nav li a’).click(function() {
    $(‘h1, h2’).addClass(‘toppad’);
    });
    }
    });

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.