Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #28316


    this is different problem, so I choose to open a new thread for this.

    I added the button into the header, like in this thread. (Purchase code hidden if logged out)

    But there’s two problems.

    one problem with the small fixed header:

    the button isn’t centered, see here:

    I’ve tried with the header with social icons. There it works, but I don’t want the social icons in my header.

    the second problem is now, that the button in the footer isn’t centered anymore.

    See here:

    I’ve tried to mess around with the values, but nothing worked. Right now, the custom css looks like this:

    .main_menu {

    right: 100px;


    .avia-button-right {

    display: inline-block;

    left: 0px;

    position: relative;

    float: right;


    @media only screen and (max-width: 767px) {

    .avia-button-right {

    left: initial;

    position: absolute;

    top: 0px;

    right: 0px;



    Can you help me out?



    Hi DoGrinDigital,

    We need to see the actual site live. The 2 screenshot urls both go to 502 errors as well.




    Ok, sorry.

    The site is


    1) To center the button in the header change the margin-top value from 39px to 25px. You can also use another value if you feel that 25px doesn’t look right.

    2) To center the button in the footer try following css code – insert it into the quick css field

    #footer .av_promobox .avia-button.avia-size-large {
    margin-top: -100px;


    1) Nothing changes. When I reload the page, the button seems to be in the right position for a second, but then jumps back down.

    2) The position is now right, thanks. But the button is kind of narrow. The width is way smaller than the normal button, that was there before. (Before I added the button to the header)


    The value is still set to 39px in your header.php file where you added the code for that button.

    The footer button can have its size specifically set with:

    #footer .av_promobox .avia-button-wrap.avia-button-right {
    width: 215px;




    I know it appears so, but I changed the value to 25. It’s really changed, as you can see here:

    That shortcode fixed the footer-problem. Thanks!


    The only thing I can think of is that there is something preventing the page from showing on the front end. Either a caching plugin or server side caching.

    You can try adding a fake class on the button and see if it gets reflected on your sites source code but also you can force the change with a bit of css:

    #header .avia-button-wrap.avia-button-right {
    margin-top: 25px !important;

    This is just a bandaid though.




    This shortcode made it. I’ll try to find out, which plugin is preventing the change on the front end.

    Thank you!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Button in header and footer problem’ is closed to new replies.