Home Forums Weaver Xtreme Theme menu items

Viewing 16 posts - 1 through 16 (of 22 total)
  • Author
    Posts
  • #68597
    merlojh
    Participant

    Is there a way to move or center the menu items and move the PayPal button closer to the menu items John

    Home

    #68602
    scrambler
    Moderator

    We have been through this.

    What do you mean by “center”?

    The menu and the PayPal button are both on the same line. they are globally (as a group) centered in the Site Wrapper width.

    If you wanted to the menu to be center on the site width, then there would not be enough space for the PayPal button except for very large browser.
    the proper design for that 

    So there is there some other centering that you mean??

    To get a menu centered, the best design would be to have the Logo and the PayPal button above it, Logo on the left PayPal on the right.

    The proper way to do that would be to remove them from the menu areas, and put them in their own area like the Pre header are (found in advanced options > HTML Insertion area.

    There you could insert them using the following HTML structure

    <div class="mylogo" style="float:left;">Put the HTML of the Logo there</div>
    <div class="mypp" style="float:right;">Put the HTML of the PayPal Button there</div>

    Then we can tweak the area with CSS if needed

     

     

    #68618
    merlojh
    Participant

    Not sure whats going on but it is a mess John

    #68620
    scrambler
    Moderator

    OK, so we are going to move the HTML to the Prewrapper HTML insertion area instead of the pre Header.

    The HTML also needs to have the syntax for the logo image… SO the HTML will now look like

    <div class="mybanner">
    <div class="mylogo" style="float:left;"><img src="http://www.singingtreeproject.org/wp-content/uploads/2021/04/new-stp-logo.png"/></div>
    <div class="mypp" style="float:right;">Put the PayPal Button there</div>
    </div>

    Then add the CSS below to style the area

    /* styling for a fixed prewrapper area above a fixed top menu.
    Adjust the 1200px max-width for the max logo to button width
    Adjust the 4em logo image height
    Adjust the 80px value in the last two rules to what works */

    #inject_prewrapper {position:fixed;top:0;width:100%;z-index:1000;background-color:#418BC5;padding:10px;}
    .mybanner {display:block;max-width:1200px;margin:0 auto;overflow:hidden;background-color:#418BC5;}
    .mylogo img {height:4em;}
    .wvrx-menu-container {top:80px !important;}
    #wrapper {margin-top:80px;}

     

    #68623
    merlojh
    Participant

    That worked but the logo is high and the PayPal button does not show thanks John

    #68625
    scrambler
    Moderator

    ???? The PayPal text plateholder IS there.

    Now you need to replace e that text by your PayPal Button HTML…

    #68627
    merlojh
    Participant

    Spaced that one out but the logo and paypal button are still to high need to be lower the tops of them are cut off John

    #68628
    scrambler
    Moderator

    It might be cutoff when you are logged in because of the WordPress admin bar, but they are not cutoff on the public site.

    You also still have text in there to remove…

    To reduce the space between top banner and menu, , you need to do two things

    1) add the rule below
    .menu-primary .wvrx-menu-container {padding-top:0;}

    if you want to reduce it further, reduce the 80px to 60px in the previous rule
    .wvrx-menu-container {top:80px !important;}

    To reduce the space beteen the menu and content, reduce the 80px value in the previous rule
    #wrapper {margin-top:80px;}

     

    #68629
    merlojh
    Participant
    #68630
    scrambler
    Moderator

    Your site is not loading so I cant see it…

    The content you show is what YOU put in the Prewrapper HTML injection area…

    #68631
    merlojh
    Participant

    Should be ok now what I have showing up is this between the logo and paypal button is

    http://www.singingtreeproject.org/wp-content/uploads/2021/04/new-stp-logo.png

    not sure where to find it?

    #68632
    merlojh
    Participant

    Forget request found the problem thanks for the help John

    #68633
    scrambler
    Moderator

    You need to replace

    #wrapper {margin-top:60px;}

    by

    #wrapper {margin-top:70px !important;}

    Or the spacing is wrong on mobile

    #68634
    merlojh
    Participant

    something is wrong I can not scroll on the main site or mobile and the paypal button does not show up in mobile view? John

    #68635
    scrambler
    Moderator

    I think you messed up the HTML in the prewrapper HTML Insertion are, and forgot a closing div or something

    Please go back there and triple check the HTML div structure  with what I have in my post #68620 above. Every OPEN div must have a CLOSING div!

    Also, You have inserted the text “Put the HTML of the Logo there” Somewhere else, may be in Advanced option > HEad section. Please check all the insertion areas and Head sections, and clean them up.

     

    #68636
    scrambler
    Moderator

    Unrelated to your issue above, You also have some CSS errors

    After /* PDF BUTTON */ you have
    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .button-one { font-size: 90%; }
    }

    Which is not correct it should just be
    @media only screen and (max-width: 480px) {
    .button-one { font-size: 90%; }
    }

    Also after /* PAGE COL */ you have

    ,col-height { 800px; }

    Which looks like a badly deleted rule, remove that
    ,col-height { 800px; }

    And you need to pay attention to CSS, and once in a while run all your custom CSS through an online validation service

     

Viewing 16 posts - 1 through 16 (of 22 total)
  • You must be logged in to reply to this topic.