Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 25, 2017 at 9:10 pm #799805
    Truemotionpictures

    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 7 years, 5 months ago by Yigit.
    May 26, 2017 at 4:05 pm #800200
    Andy

    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: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    2.) Use this code:

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

    Please use different tickets for different questions.

    Best regards,
    Andy

    May 30, 2017 at 9:15 pm #801665
    Truemotionpictures

    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!

    June 1, 2017 at 4:40 pm #802647
    Victoria

    Hi Truemotionpictures,

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

    View post on imgur.com


    The menu looks more appropriate where it is. Consider the look on iPad
    http://imgur.com/a/ZTlqw, 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,
    Victoria

    June 2, 2017 at 8:10 am #802898
    Truemotionpictures

    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?

    June 6, 2017 at 6:04 am #804297
    Ismael

    Hi,

    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,
    Ismael

    June 7, 2017 at 9:22 am #804949
    Truemotionpictures

    Thank you Ismael,
    that’s working perfectly :)

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