Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

babblewrap

Member
  • Posts

    7
  • Joined

  • Last visited

Reputation Activity

  1. Like
    babblewrap reacted to tuanphan in Adding tabs without a plugin.   
    Remove above & try new code
    <div class="tabs"> <ul class="tabs-nav"> <li><a href="#tab-1">Features</a></li> <li><a href="#tab-2">Details</a></li> </ul> <div class="tabs-stage"> <div id="tab-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</p> </div> <div id="tab-2"> <p>Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</p> </div> </div> </div> <style> .tabs { max-width: 538px; } .tabs-nav li { float: left; width: 50%; } .tabs-nav li:first-child a { border-right: 0; border-top-left-radius: 6px; } .tabs-nav li:last-child a { border-top-right-radius: 6px; } .tabs a { background: #eaeaed; border: 1px solid #cecfd5; color: #0087cc; display: block; font-weight: 600; padding: 10px 0; text-align: center; text-decoration: none; } .tabs a:hover { color: #ff7b29; } .tab-active a { background: #fff; border-bottom-color: transparent; color: #2db34a; cursor: default; } .tabs-stage { border: 1px solid #cecfd5; border-radius: 0 0 6px 6px; border-top: 0; clear: both; padding: 24px 30px; position: relative; top: -1px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // Show the first tab by default $('.tabs-stage div').hide(); $('.tabs-stage div:first').show(); $('.tabs-nav li:first').addClass('tab-active'); // Change tab class and display content $('.tabs-nav a').on('click', function(event){ event.preventDefault(); $('.tabs-nav li').removeClass('tab-active'); $(this).parent().addClass('tab-active'); $('.tabs-stage div').hide(); $($(this).attr('href')).show(); }); </script>  
  2. Like
    babblewrap reacted to tuanphan in Centering dropdown menu items   
    @babblewrap Try adding to Design > Custom CSS
    .header-nav-folder-content { min-width: 100px !important; width: 150px !important; }  
  3. Like
    babblewrap got a reaction from bangank36 in Centering dropdown menu items   
    Site URL: https://pear-tuba-w7nx.squarespace.com/
    Is there a way to center or make the dropdown menu smaller?  I am following this thread but it doesn't seem to change the width.  I'm currently using 7.1 for my site.  Thanks.
     
     

  4. Like
    babblewrap reacted to humxahafeex in Adding tabs without a plugin.   
    Hi , You can create it on your own without plugin but it requires little knowledge of css , please visit the following link for more info.
    https://www.w3schools.com/w3css/w3css_tabulators.asp
     
    Hope it helps 🙂 
  5. Like
    babblewrap got a reaction from bangank36 in Adding tabs without a plugin.   
    Hi guys,
     
    I'm trying to recreate the tab feature similar to this kickstarter style product pitch page.  Is there a way to do with on Squarespace without a plugin?  If so, could you please point me in the right direction?  Thanks!
     

     
×
×
  • Create New...