Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 9, 2023 at 4:50 pm #1406913
    JantienM

    Hi,

    I’m almost there with my hamburger menu, but a few issues remain which I hope you can help me with…

    1. I’ve set my menu to not duplicate the main menu item in the sub menu list (according to this thread: https://kriesi.at/support/topic/duplicate-sub-menu-item-on-mobile-burger/) but I want the main item to be clickable. Is that possible?
    2. I have adjusted my vertical lining between the submenu items, but the first submenu item that is placed beneath a main menu item is set too high, it needs more space at the top. Can you help me with that?
    3. The area of the menu has a lot of white space on top, how do I remove this? UPDATE 10/5/2023: I found a way to remove the white space, but now it is too high and it needs a bit white at the top or, even better, the logo of my company is visible in the menu, how can I remove this? Then the height is okay.

    Thanks again!

    • This topic was modified 1 year, 6 months ago by JantienM.
    • This topic was modified 1 year, 6 months ago by JantienM. Reason: Found one solution (3), resulting in another issue
    May 13, 2023 at 6:46 pm #1407283
    Mike

    Hey JantienM,
    Thank you for your patience, for your first question about your burger menu if you selected to display submenu items on click, the parent menu item will no longer navigate to the URL it contains, but toggles the visibility of its submenu items. If you want users to be able to open the parent menu URL please use the Clone Title Menu Items To Submenu option.
    It is possible to replace the burger menu parent cloned menu item text to a different text so the menu item that toggles the sub-menu has a different text and the parent menu item with link to it’s page, this is the example function but it will need to be modified for your menu, let us know if you need help with this.
    #2 Can you share what css you used to change the space between the sub-menu items so we can advise.
    #3 If you want the logo behind the burger menu when it is open try this css:

    @media only screen and (max-width: 767px) { 
	.av-burger-overlay-active .logo a {
		 z-index: 0;
	}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 16, 2023 at 3:05 pm #1407627
    JantienM

    Hi Mike,
    Firstly, I’v ticked the box to get updates on this topic, but I don’t get any messages anymore… Do you know why?

    #1 I think I will solve this problem by making the main menu items that have a sub, not clickable. Maybe easier ;-)
    #2 This is the code I use:

    .html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    height: auto !important;
    line-height: 1 !important;
}

    (I made some changes in the menu as I said I would under #1, but now the submenu is not lining the way it should anymore, so not just the top one, but all the items are too close to each other)

    #3 Yes that worked! Only, I need a bit white at the top, you can see now that the closing X is set against the top of the white sliding menu. Maybe better: is there a way to put the X a bit down, so there is a bit white space above it?
    (After the changes I made to the menu the closing X is now almost completely above the white, maybe better to add more white space above the X)

    THANKS

    • This reply was modified 1 year, 6 months ago by JantienM. Reason: New issues after updating menu
    May 17, 2023 at 5:03 am #1407693
    Ismael

    Hi,

    Thank you for the update.

    2.) Adding this css rule should adjust the margin between the submenu items on mobile view.

    .av-main-nav-wrap ul {
    margin-top: 0;
}

    The top margin is currently set to -20px, pulling the submenu items upward.

    Best regards,
    Ismael

    May 17, 2023 at 10:33 am #1407727
    JantienM

    Thanks Ismael, I will look into that -20px margin and will add the css.

    Do you know why I don’t get update e-mails, anymore?

    May 17, 2023 at 10:55 am #1407731
    JantienM

    Hi,
    The css worked, as well as setting the margin to 0, only now the hamburger icon is set too low. Any fix on that?
    Thanks

    • This reply was modified 1 year, 6 months ago by JantienM.
    May 19, 2023 at 3:24 am #1407900
    Ismael

    Hi,

    only now the hamburger icon is set too low. Any fix on that?

    The following css code should adjust the vertical position of the mobile menu icon. Please insert it in the css media query for mobile devices.

    .av-main-nav-wrap ul {
    margin-top: 0px;
}

.responsive #top #header_main > .container .main_menu .av-main-nav > li > a, .responsive #top #wrap_all .av-logo-container {
    height: 40px;
    line-height: 50px;
}

    Best regards,
    Ismael

    May 19, 2023 at 12:17 pm #1407935
    JantienM

    Hi Ismael,
    Unfortunately, it’s still not working… Menu icon is placed correct, but the other issue is back (closing X placed above the white of the slding menu)
    Hope you can help me further, thanks

    May 20, 2023 at 10:40 pm #1408032
    Mike

    Hi,
    Thank you for your patience, I see that your burger menu is vertically centered until 768px, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 768px) and (max-width: 989px) { 
	.av-logo-container * {
    vertical-align: top;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    May 22, 2023 at 5:51 pm #1408170
    JantienM

    Hi Mike,
    Thanks, but it is still not working properly…

    May 22, 2023 at 6:16 pm #1408172
    Mike

    Hi,
    Thanks for the feedback, when I check the burger menu is centered in it’s element header_main, please see the screenshot in the Private Content area, the blue highlighting is the element.
    If you are not seeing this try clearing your browser cache, if I misunderstood please explain, a screenshot may help.

    Best regards,
    Mike

    May 22, 2023 at 7:31 pm #1408187
    JantienM

    Hi,
    Yes the menu icon is placed correct, but the closing X when the sliding menu opens, is not placed correct. Hope you understand what I mean.

    May 23, 2023 at 12:30 pm #1408244
    Mike

    Hi,
    Thanks for the feedback, the burger menu close “X” is in the correct spot, the same spot as the burger icon. The issue I see is that a margin-top of 50px was added with some custom css:

    @media only screen and (max-width: 767px){
.html_av-overlay-side #top .av-burger-overlay-scroll {
    margin-top: 50px;
}
}

    Please try to remove this from your customization so the burger menu background will cover the whole screen.
    If you can’t find the css please include a admin login so we can help.

    Best regards,
    Mike

    May 23, 2023 at 3:25 pm #1408271
    JantienM

    Yes thanks Mike,

    The previous builder f the website worked with the custum.css file. If I delete something there it doesn’t have an immediate effect, so I also added margin:0 to my quick css and then it worked!
    Thanks for your patience.

    Ps. I still dont get updates anymore through my e-mail (I have ticked the box for notifications of follow-ups) , any ideas why that is?

    May 23, 2023 at 4:57 pm #1408301
    Mike

    Hi,
    Glad to hear that you have this sorted out, perhaps the email notifications are going to your spam folder, when I check your profile it shows that you are subscribed to this thread. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘tweaking hamburger mobile menu’ is closed to new replies.