Jump to content


Photo
* * * * * 1 votes

PayPal button in NavBar


Best Answer Rob , 24 March 2013 - 05:58 PM

Hi,

 

If you go to Dashboard > Appearance > Menus, you'll see a grey tab at the top of the page labelled "Screen Options".  Please click it.

 

A drop down panel will appear. You'll see "CSS Classes".  Check that. Close the panel by clicking "Screen Options" again.  You do not have to save anything. It's automatic.

 

Create your menu item for PayPal. Add the link as a custom link to PayPal. In the settings for the link you'll see a new field for CSS Class. Type in this field my_paypal1 (make sure you do not use any spaces).  Do not add a label.

 

Now craft some CSS to include the image as a background.  I note that the link provided is secured.  My recommendation is to place the image outside the secured area to avoid conflicts.

 

You'll write something like this:

 
.my_paypal1 {
background-image:url('full URL to your image');
background-repeat:no-repeat;
width: 90px;
height: 15px;
}

Please make sure you have the full url to the image in between the single quotes.   Set the width (90px is an example only) to the width of your image.  Adjust the height as desired as well.

 

Copy the modified code and paste it into Dashboard > PageLines > Site Options > Custom Code.

 

Now, the button is the image, and the menu is providing the link to the paypal site.

 

Let us know if this works for you.

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 HavingTrouble

HavingTrouble

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 24 March 2013 - 05:35 PM

I know it is CSS related, but if anyone knows how to add this small button (

Please Login or Register to see this Hidden Content

) to the main Std NavBar menu, HavingTrouble will be most appreciative. I figure a 15px height is good enough.  

Tks



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 24 March 2013 - 05:58 PM   Best Answer

Hi,

 

If you go to Dashboard > Appearance > Menus, you'll see a grey tab at the top of the page labelled "Screen Options".  Please click it.

 

A drop down panel will appear. You'll see "CSS Classes".  Check that. Close the panel by clicking "Screen Options" again.  You do not have to save anything. It's automatic.

 

Create your menu item for PayPal. Add the link as a custom link to PayPal. In the settings for the link you'll see a new field for CSS Class. Type in this field my_paypal1 (make sure you do not use any spaces).  Do not add a label.

 

Now craft some CSS to include the image as a background.  I note that the link provided is secured.  My recommendation is to place the image outside the secured area to avoid conflicts.

 

You'll write something like this:

Please Login or Register to see this Hidden Content

Please make sure you have the full url to the image in between the single quotes.   Set the width (90px is an example only) to the width of your image.  Adjust the height as desired as well.

 

Copy the modified code and paste it into Dashboard > PageLines > Site Options > Custom Code.

 

Now, the button is the image, and the menu is providing the link to the paypal site.

 

Let us know if this works for you.



#3 HavingTrouble

HavingTrouble

    Newbie

  • Members
  • 4 posts
  • Country: Country Flag

Posted 24 March 2013 - 06:11 PM

Worked like magic.. Thanks Rob



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 24 March 2013 - 06:16 PM

My pleasure.