Button

[merlojh]

On this site http://www.singingtreeproject.org I would like to have the PayPal donate button on the top above the menu on right side? John

[Weaver]

Maybe in the Header HTML area, or as Menu Right HTML?

[scrambler]

Put it in the menu Right HTML box and post back so I can see if I can move it where you wish using custom CSS

[merlojh]

I think it looks OK except it through the menu off center? John

[scrambler]

By default it puts is sideways which causess the menu to drop as they cant all fit on one line

The CSS below will move the button above the menu as you had asked (ajust the values as you see fit)

.wvrx-menu-right {position:absolute;top:0;right:0;margin-top:0;}

Now it seems you moved the menu up, so we need the rule below to shift it down a bit and make space for the button

I believe you have the rule below with the value at 1em, make it 2

#nav-primary ul.wvrx-menu {padding-top: 2em;}

 

[merlojh]

The main menu still is not centered? John

[scrambler]

??

Your menu is on the same level as the Site logo, so it is not “centered” per say, not sure what you are getting at…

[merlojh]

What I see is the PayPal button sitting above the main menu and to the right of the contact button and above it. What I am talking about is that the main menu I have centered now it is over to the left. On the tablet the PayPal button looks fine but on phones it is on top of the logo? Thanks John

[scrambler]

both the logo and the button do not fit side by side on phone, so you need to choose what to do.

Do you want to make the logo smaller, or do you want to shift the PayPal button below it?

[merlojh]

Shift the PayPal button below it. The main menu still is not centered? Thanks John

[scrambler]

“centered” how, horizontally between the logo and the right edge, or vertically?

[merlojh]

Menu center horizontally (MAIN OPTIONS – MENU- <small>Align Area</small>- CENTER THIS IS HOW I HAVE IT BUT DOES NOT LOOK CENTER ON PAGE) of page hope that is more clear and on phone below logo thanks John

[scrambler]

The alignment is the same ass when the logo was not on top. It is centered between the logo and the right of the 1100px container you made the header.

there is however a small offset that was there before because of some default left margin on the menu. That can be removed with the rule below

ul.wvrx-menu {margin-left:0;}
.menu-primary .custom-logo-on-menu {margin-right:0;}

As for moving the logo below try the rule below

.is-phone .wvrx-menu-right {position:relative;}

[merlojh]

Moving the logo below on phone worked. Still do not understand the menu when I set the menu to right it looks the same as center? John

[scrambler]

Instead of putting the buttons in the menu right HTML, put them in the Header HTML area.

Remove all the CSS I gave you and post back with the button there and I will get you new CSS for the new location

[merlojh]

I removed all of this is that right? John

#nav-primary ul.wvrx-menu { padding-top:4em; }
.wvrx-menu-right {position:absolute;top:0;right:0;margin-top:0;}
.is-phone .wvrx-menu-right {position:relative;}

ul.wvrx-menu {margin-left:0;}
.menu-primary .custom-logo-on-menu {margin-right:0;}

[Author]

Posts