Home › Forums › Weaver Xtreme Theme › Button
- This topic has 23 replies, 3 voices, and was last updated 1 month ago by
merlojh.
-
AuthorPosts
-
January 16, 2021 at 17:49 UTC - Views: 63 #67045
merlojh
ParticipantOn 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
January 16, 2021 at 17:55 UTC - Views: 60 #67046Weaver
KeymasterMaybe in the Header HTML area, or as Menu Right HTML?
January 16, 2021 at 18:13 UTC - Views: 58 #67048scrambler
ModeratorPut 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
January 16, 2021 at 18:40 UTC - Views: 56 #67049merlojh
ParticipantI think it looks OK except it through the menu off center? John
January 16, 2021 at 20:18 UTC - Views: 55 #67051scrambler
ModeratorBy 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;}
January 18, 2021 at 02:04 UTC - Views: 51 #67064merlojh
ParticipantThe main menu still is not centered? John
January 18, 2021 at 04:44 UTC - Views: 49 #67066scrambler
Moderator??
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…
January 18, 2021 at 17:28 UTC - Views: 45 #67072merlojh
ParticipantWhat 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
January 18, 2021 at 22:42 UTC - Views: 43 #67076scrambler
Moderatorboth 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?
January 19, 2021 at 00:20 UTC - Views: 40 #67083merlojh
ParticipantShift the PayPal button below it. The main menu still is not centered? Thanks John
January 19, 2021 at 02:15 UTC - Views: 37 #67085scrambler
Moderator“centered” how, horizontally between the logo and the right edge, or vertically?
January 19, 2021 at 03:54 UTC - Views: 37 #67086merlojh
ParticipantMenu 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
January 19, 2021 at 05:01 UTC - Views: 34 #67087scrambler
ModeratorThe 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;}
January 19, 2021 at 19:41 UTC - Views: 30 #67097merlojh
ParticipantMoving 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
January 20, 2021 at 01:21 UTC - Views: 27 #67099scrambler
ModeratorInstead 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
January 22, 2021 at 18:37 UTC - Views: 24 #67109merlojh
ParticipantI 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;} -
AuthorPosts
- You must be logged in to reply to this topic.