cayindustries

OK – We got that part. Now the last thing I need is for the highlighted area to be centered with the text. Basically just shifted up a bit like the text.

@weblizar – The theme is great, Thank You!

I am not using eCommerce currently because I only have the one product, but I am aware of WooCommerce and what they can offer when the time comes.

As for the Paypal, I am not sure where to make the CSS adjustments but I am open to try things out if you have an idea. I put the code for the Paypal Button and container in the post above so maybe that will help. Let me know. Thanks.

@michael – I am not using a plugin and I thought the container would cause the issue. I tried to play with the padding, but no joy. Let me know what you think and how I could change it. Thanks.

Here is the complete code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="box">

  <div id="innerbox">

    <div id="headerbox">

      <h4 id="price"><span id="pricestyle">price:</span>$34.99</h4>

      <h2 id="plus">+</h2>

      <h4 id="shipping"><span id="shipstyle">shipping:</span>$7.95</h4>

      <h2 id="total"><span>Total:</span>$42.94<span id="tax"> + tax</span></h2>

      <h6 id="Alternate">*If shipping outside the US please see alternate shipping costs below. Total price will be calculated on checkout page.</h5>

    </div>

    <div class="container">

      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

        <input type="hidden" name="cmd" value="_xclick">

        <input type="hidden" name="business" value="2ZF8FQ9RWU4ZS">

        <input type="hidden" name="lc" value="US">

        <input type="hidden" name="item_name" value="The Socket Roll">

        <input type="hidden" name="amount" value="34.99">

        <input type="hidden" name="currency_code" value="USD">

        <input type="hidden" name="button_subtype" value="services">

        <input type="hidden" name="no_note" value="0">

        <input type="hidden" name="cn" value="Add special instructions to the seller:">

        <input type="hidden" name="no_shipping" value="2">

        <input type="hidden" name="weight_unit" value="lbs">

        <div id="position">

          <label for="qty">Qty.</label>

          <input type="text" name="quantity" id="qty" size="3" value="1" required>

      <!-- Button Images -->

          <div id="ppImage">

            <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/buy-logo-medium.png" border="0" name="submit" alt="Buy now with PayPal!">

          </div>

        </div>

        <div id="accepted">

          <input type="image" src=" https://openmerchantaccount.com/img/accepted_payment200x25px.png" alt="Accepted Payment Methods" />

        </div>

        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

      </form>

    </div>

  </div>

  <div class="moreShipping">

    <ul class="no-js">

      <li>

        <p class="clicker">+ Alternate Shipping Costs</p>

        <ul>

          <li>Alaska</li>

          <li>Hawaii</li>

          <li>Puerto Rico</li>

          <li>U.S. Virgin Islands</li>

          <li>- $9.95</li></br>

          <li>Canada and International</li>

          <li>- $29.95</li></br>

        </ul>

      </li>

    </ul>

  </div>

    <!--<p>+ Additional Shipping Costs</p>-->

</div>

<style>

#box {

  top: 360px;

  right: 90px;

  width: 250px;

  border-radius: 10px;

  box-shadow: -3px 2px 8px rgba(77, 77, 77, 0.5);

  background-color: rgb(255, 255, 255);

  position: fixed;

}

#innerbox {

  width: 100%;

  height: 100%;

  position: relative;

}

#headerbox {

  background-color: rgb(245, 245, 245);

  border-radius: 10px 10px 0px 0px;

  border-bottom: 1px solid rgb(162, 162, 162);

}

#pricestyle {

  font-weight: 300;

  font-size: 13px;

  margin-right: 8px;

  color: rgb(107, 107, 107)

}

#price {

  width: 130px;

  padding-top: 10px;

  padding-bottom: 4px;

  margin: auto;

}

#plus {

  font-weight: 700;

  color: rgb(43, 43, 43)

}

#shipstyle {

  font-weight: 300;

  font-size:13px;

  margin-right: 8px;

  color: rgb(107, 107, 107)

}

#shipping {

  width: 130px;

  padding-bottom: 4px;

  border-bottom: 1px solid rgb(152, 152, 152);

  margin: auto;

}

h2,h4 {

  margin: 0px;

  text-align: center;

  font-family: "Open Sans",sans-serif;

}

h2 span {

  font-size: 13px;

  margin-right: 8px;

  font-weight: 300;

  color: rgb(107, 107, 107);

}

#total {

  padding: 2px 0px 6px 0px;

}

#tax {

  font-style: italic;

  color: rgb(0, 0, 0);

}

.container {

  width: 200px;

  height: 103px;

  margin: auto;

  padding:25px 0px;

}

h6 {

  margin: 0px;

  text-align: center;

  padding-top: 15px;

  padding-right: 20px;

  padding-bottom: 20px;

  padding-left: 20px;

  font-family: "Open Sans",sans-serif;

  font-weight: 400;

  color: rgb(107, 107, 107);

}

#position {

  width: 170px;

  margin: auto;

}

#qty {

                -webkit-border-radius: 5px;

                -moz-border-radius: 5px;

                border-radius: 3px;

}

#ppImage {

padding-top: 20px;

}

#accepted {

  padding-top: 3px;

}

.moreShipping {

  margin-left:0px;

  font-family:"Open Sans",sans-serif;

  font-size: 13px;

  position: relative;

  color: rgb(56, 57, 134);

  padding-top: 0px;

}

.moreShipping ul {

  position: absolute;

  padding-left: 0px;

  margin-left: 0px;

  font-weight:600;

}

.moreShipping ul li ul {

  position:relative;

  padding-top: 20px;

  background-color: rgb(245, 245, 245);

  border-radius:0px 0px 10px 10px;

  border: 1px solid rgba(187, 185, 185, 0.89);

  box-shadow: -5px 7px 8px rgba(107, 104, 104, 0.27);

  left:0;

  right:0;

}

.moreShipping ul li ul li {

  padding-top: 0px;

  padding-bottom: 2px;

  background: transparent;

}

.moreShipping ul .clicker {

  position:relative;

  rgb(0, 0, 0);

}

.moreShipping ul .clicker:hover,.moreShipping ul .active{

  color: rgb(56, 57, 134);

}

.moreShipping ul li  {

  margin-left: 0px;

  cursor:pointer;

  transition:background-color 0.2s ease-in-out;

  -webkit-transition:background-color 0.2s ease-in-out;

  -moz-transition:background-color 0.2s ease-in-out;

  display:block;

  padding:8px 10px 8px 40px;

  background:#FFF;

  color:#333;

  text-decoration:none;

}

.moreShipping ul li :hover {

  background:#F2F2F2;

}

/* Fallbacks */

.moreShipping .no-js ul {display:none;}

.moreShipping .no-js:hover ul {display:block;}

</style>

<script>

$(function () {

  $('.moreShipping > ul').toggleClass('no-js js');

  $('.moreShipping .js ul').hide();

  $('.moreShipping .js').click(function(e) {

    $('.moreShipping .js ul').slideToggle(200);

    $('.clicker').toggleClass('active');

    e.stopPropagation();

  });

  $(document).click(function() {

    if ($('.moreShipping .js ul').is(':visible')) {

      $('.moreShipping .js ul', this).slideUp();

      $('.clicker').removeClass('active');

    }

  });

});

</script>

That CSS did the exact opposite of what I needed. ??

I would just like to move the text upward inside the navbar so it is in the middle.

Thanks.

That Worked! Thanks!

That worked, but my home button is constantly illuminated like it is hovering. I would like it to only illuminate when hovering.

Also, is there a way to shrink the navbar itself so there is no gray area when hovering like there is currently.

Here is the site: https://www.thesocketroll.com

Thanks!

It is added in the “Theme Options” area, but there is no change. Please advise. Thanks.

Nope. I changed the 12px to 4px and there is still no change. Please advise.

It is currently 4px now.

OK. Thanks!

Can you recommend one that works well with Enigma

Worked. Perfect!

I just added and it didn’t work. Please check MOBILE version to see what I am referring to. Thanks.

Any other code on this one?

OK, Yes that did work, but the text in the RED slider is much larger than the text in the Blue sliders. Is there a way to correct this?

Thanks!