Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #799805

    Hi there,
    thank you for the amazing theme and the new options added in the 4.0 version.

    I have a couple of questions regarding the brand new burger menu:

    1. I would like to vertical align the burger menu. With the following code I managed to achieve that alignment :

    .js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {
        display: block;
        top: 460px;

    Burger Menu Alignment

    Unfortunately using a px value it’s not responsive when the viewport size changes and a percentage value is not working (maybe because of the container size).
    Is there a different way to use a percentage value like 50%?

    2. As you can see on my website, I’m using a shadow effect on the text. When the burger menu is animated to an X the shadow are rotated as well, taking a wrong position. Furthermore i would like to have black shadows in the menu overlay.
    How can I solve this?

    3. Is it possible to add social media icons (or better just names) in the menu overlay?

    4. How can I get the current page (or section) highlighted in the overlay menu?

    Thank you in advance for your help!

    • This topic was modified 6 years, 8 months ago by Yigit.

    Hey Truemotionpictures,

    1. I think it’s best to work with media queries in your case. So use your code and wrap them around, like this:

    @media only screen and (max-width: 736px) {
    .js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {
        display: block;
        top: 160px;

    Adjust as needed. For more information about media queries:

    2.) Use this code:

    .av-burger-overlay-inner {
    background-color: black;

    Please use different tickets for different questions.

    Best regards,


    Hi Andy,

    thank you for replying. Maybe I was not explaining it properly so unfortunately your reply is not really answering my question:
    I do need to have the burger menu on 50% of the height of the screen. The media query you suggest is working on the width and, after all, I will have to make dozens of queries to cover all the cases that way.
    What I do need to know is if there is a way to place the burger menu at half of the viewport, using a percentage value so it’s automatically replacing itself on viewport resize?

    Also the second question was not really clear. What i meant was: is it possible – after the menu animation – to replace the X symbol (derived from the rotation of the burger menu elements) with an identical X (in one only piece), so I can apply a proper shadow to it?

    For question 3 and 4 i will open a new thread. Thanks again!


    Hi Truemotionpictures,

    You could try playing with the box-shadow css rule:

    View post on

    The menu looks more appropriate where it is. Consider the look on iPad, there is no room for the menu on the right, just does not seem like it belongs there. (IMHO)

    If you need further assistance please let us know.
    Best regards,


    Hi Victoria,

    thank you for the suggestion. I agree with you but I just need the vertical alignment (in %) on the desktop version only.
    For tablets and mobile I can use a media query.
    Can I achieve this? If yes how?



    Please try to use “vh” unit instead of “%”.

    @media only screen and (min-width: 1024px) {
        .js_active.html_burger_menu #avia-menu .av-burger-menu-main, .html_burger_menu #top #avia-menu .menu-item-search-dropdown {
            top: 40vh;

    Best regards,


    Thank you Ismael,
    that’s working perfectly :)

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Burger Menu: vertical alignment’ is closed to new replies.