Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #14505


    You have always been so helpful on this forum, I was wondering if someone would be able to help with the below modifications on my site here:-

    1) I would like to center justify the main navigational bar

    2) I would like to add two buttons (large shortcode buttons) onto the right hand side of the logo, so it sits right justified and above the menu

    Would anyone be able to help me with the custom css required?

    Best regards


    Hi _weezer,

    1.) Try to add this on your Quick CSS:

    .main_menu ul:first-child > li > a {
    margin: 0 15px !important;

    .main_menu ul {
    margin-left: 32px !important;

    2) I can already see two buttons above. Just add this code in Quick CSS to position them:

    .teflbuttons .avia-button.light.custom.medium {
    position: absolute;
    bottom: 32px;
    right: 184px;

    .teflbuttons .avia-button.light.custom.xl {
    position: absolute;
    bottom: 32px;
    right: 46px;
    line-height: 2em !important;
    width: 100px !important;

    Just adjust the bottom and right values. Also, you can remove the line-height, I used it to make the buttons consistent in size. Hope this helps. :)




    Could you guys tell me what code (and where it belongs) is being used to add those two buttons? I’m guessing it’s in the header.php file but am not sure and would LOVE to add this to a site I’m working on.

    Thanks if you can help!


    Hi jwcrash,

    You can do something similar to the above by adding your own div class to hold the buttons and then making the class of the links the .avia-button.light.custom.medium or xl etc.

    <div class="custombuttons">
    <div><a href="" class="avia-button light custom xl" >Button Text</a></div>

    Then use the same kind of css styling as above to style it.

    You’ll add the html into your header.php where you want them to appear and if you want exactly the same as above you’ll style the custombuttons class to align: right as well.




    Thanks very much!



    Glad we could help. :)



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

The topic ‘Custom css help with header’ is closed to new replies.