Struggling with mobile dropdown menu

Support
#1

I am still trying to get my dropdown menu to look right on mobile view and I have a few questions if you can help. I have created a separate menu for the mobile dropdown and have personalised a little, but when the menu toggle is clicked to the dropdown, the dropdown column looks a tad odd with how it comes down to a certain width with just a tad of space to the left but a larger spacing to the right (see screenshot).

1 - Is there no way to make the dropdown spread 100% of the available screen width?

2 - If above not possible, is there a way to at least make the dropdown centralised so equal width left and right of the screen?

3 - I was able to edit the last menu link to create a button look, but I can’t seem to find the right CSS to make the donate text white and centralise the text within the orange button?

4 - Can additional text be added to a dropdown menu or can the main desktop topbar menu be added within the mobile dropdown menu?

#2

Also, additionally to the above. Inside a mobile dropdown menu, If we had a sub menu link added, can that pop out to display under the menu item selected, rather than pop out to the left or right of the menu item?

#3

Hi There,

1.) Look for the following settings and adjust accordingly:

3.) Since that is part of the element, we can only do that on custom CSS. See this: https://screencast-o-matic.com/watch/cb6Q2JICc6

li#menu-item-851 .x-anchor-text>span {
    color: white;
}
li#menu-item-851 .x-anchor-text {
    display: block;
    text-align: center;
    width: 100%;
    margin: 10px auto 5px;
}

4.) Can you give us screenshot of what you are trying to achieve? This will help us give you more specific suggestion. I am not sure at the moment where you want to add text.

That element is how it works by default. Please use different element. Use Navigation Collapsed element instead

Hope this helps.

#4

Hi,

This only allows a certain width, but with so many different mobile sizes that doesn’t always work, there is no percentage option within that setting. I tried adding width: 100% via CSS but nothing seems to work?

Ashley

#5

Hi there,

Are you displaying the same menu in desktop and mobile? You should use the separate menu for each (desktop, menu). Example, inline navigation for desktop, then collapsible navigation for mobile. Each element has customize section where you can hide them from a specific device. Like hiding a desktop menu from mobile, then hiding a mobile menu from desktop. The Collapse navigation element as option for Content Max Width which you can set for % and add 100. It’s under Off Canvas section of collapse navigation.

Thanks!

#6

Thank you for your help with the menu. I finally seem to be getting there. I created a collapsed navigation menu for the mobile, and I have it looking how I want it and it seems to work on mobiles. I have two remaining questions.

1 - On the top links there is an icon to indicate sub-links. When I select the top link to display the sublinks, is it possible to change the sublink icon from the arrow down to an arrow up (to indicate press again to close the sublinks)?

2 - I want to add a short headline about our website at the very top of the off canvas menu. Is it possible to add a text block at the very top of the off canvas?

#7

Hi there,

  1. Please add this CSS to your global custom CSS.
a.x-active .x-anchor-sub-indicator:before {
    content:"";
}
  1. Possible with custom javascript, please add this code to your global custom javascript

jQuery('.hm9.x-off-canvas .x-off-canvas-content').prepend('<h3>My Headline</h3>');

Thanks!

#8

Perfect, thank you.

#9

You’re most welcome!