Message to John (merlojh)

[scrambler]

Hi John @merlojh

I am wondering if you are not seeing my posts on your last thread.

Have you seen the one below

Button – Weaver Support Forum (weavertheme.com)

It said”

Are you reading my posts John???

You have the Button HTML in the Menu Right HTML box.

I asked you to move it into the Header HTML Box 

Main options > Header >Header HTML > Header HTML Content

Once it is there I can come up with CSS to try and do what you want

[merlojh]

This css was in the fonts and custom I removed it from there so I should put it in the Header HTML box.

.is-mobile .menu-primary .custom-logo-on-menu img {height:5em;}

.is-mobile .wvrx-menu-right {font-size:80%;}

[merlojh]

That did not work it came in below the header as css text John

[scrambler]

John you are confused.

The CSS was removed, and that was fine, don’t put it back anywhere!

I am speaking about the HTML that CREATES the buttons.

Right now, you have that HTML in the Menu Right HTML box, located in Main Options > Menus > Primary Menu Bar > Right HTML box

I asked you to move The HTML in that box (NOT the CSS) into the Header HTML Box located below

Main options > Header >Header HTML > Header HTML Content

Once it is there I can come up with CSS to try and do what you want

[merlojh]

I did that and it ended up in a white space below the header yes a little confused not remembering  John

[scrambler]

That is fine, the white will go away once I come up with the CSS

[scrambler]

That said while the buttons are here, we can see the menu has the same “centering” that it had before when we had positioned the buttons….

So I don’t understand the centering issue you had with it when we did….

[merlojh]

Yes menu looks fine but what about the donate button it is a white space below? John

[merlojh]

Are you going to give me the css so the PayPal button is not under the header in a white space? John

[scrambler]

I forgot your menu was fixed.

We need to move the buttons again, sorry.

Remove the HTML from the Header HTML content box.

Instead insert it in Advanced options > HTML Insertion Areas > Pre wrapper code box, and change your HTML code to the one below

<form action="https://www.paypal.com/donate" method="post" target="_top">
<input type="hidden" name="hosted_button_id" value="BKT5XZR2CLDSN">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button">

</form>

And post back

[merlojh]

Done but now it is way on the left and there is a white area under the header John

[scrambler]

Add the CSS below to your therem Global Custom CSS Rule box.

First rule moves the button above the menu

second rule shifts the menu down to make place for it

#inject_prewrapper {
position: fixed;
top: 0;z-index: 20000;
left: 50%;max-width: 1100px;
margin-left: -550px;
display: block;width: 100%;
text-align: right;}

.menu-primary ul {margin-top:30px;}

 

The white you have below the header si because you still have some stuff in the Header HTML box. go there, select all that is in the  box and delete

[merlojh]

It is sitting a little to high now near the top and to close to the menu

[buttons start='first-to-show' end='last-to-show' list='1,3,2' wrap='div'] I can’t remember where this needs to go? John

[scrambler]

You can increase the space above the buttons by changing the top value in the first rule from top:0 to something else like top:5px

You can increase the space between buttons and menu by changing the value in

.menu-primary ul {margin-top:30px;}

Your button shortcode is to display your social icons, I cant tell you where you want them….

[merlojh]

Thanks so much for the help that worked!! John

[scrambler]

You need to do a few changes to improve on mobile,

First set the menu BG to transparent (type transparent in the menu BG color box)

then Change the rules I gave you and you modified to the ones below

#inject_prewrapper {
position: fixed;
top: 80px;left: 50%;max-width: 1100px;
margin-left: -550px;
display: block;width: 100%;
text-align: right;}

.menu-primary ul {margin-top:80px;}

.is-mobile #inject_prewrapper {left:auto;right:40px;margin-left:0;top:20px;}

@media (max-width:1030px){.menu-primary ul {margin-top:10px;}}

This will improve the spacing as the menu stacks under and on mobile

[Author]

Posts