I want to use the mobile menu on my desktop site. However, I’d like to limit the size of the menu that opens so that it doesn’t take up the whole screen. How can I limit the sizing of the mobile menu container?
(If you view my website homepage at adkseorev.com, you will see the mobile menu in the top right corner and the resulting behavior).
Hi,
You could just use a popup, instead of a menu that was designed to be used on mobile devices.
For example we use popups on many of our more recent demos, the popups can contain anything and they can open from any side of the page.
Like in this demo -> https://demo.tagdiv.com/newspaper_liberty_case_pro/ That hamburger menu from the header is a popup. The popup is set to open a page from the website, which can be built with the composer and can contain basically anything.
There are many other popup examples if you want me to provide them. My suggestion is to consider using a popup, it’s not difficult to set up -> https://forum.tagdiv.com/modal-popup/ and in my opinion it’s easier than limiting the mobile menu width and making sure it looks good across all devices.
Let me know if I can help with it.
Thank you!
Ok thanks Simion – I will try that!
Yeah so I can’t get this to work quite right – hoping you can help.
I’ve set up a modal for the popup menu:
The bottom image (with the rounded border radius) is what I want it to look like – and what it does look like when eidting in Tagdiv.
The top image is what it actually looks like on the page.
the middle image is what the modal button looks like (which is perfect).
So, two questions here:
1. how do I fix what the modal currently looks like on the page (currently on my homepage at adkseorev.com in the footer).
2. How do I get the modal button to be sticky at the top after a user scrolls 1000 pixels, for example? I can figure out how to get it to appear at 1000 pixels, but it doesn’t stay sticky/no sticky option.
I’ll help.
1. Normally if you set the border radius on the popup element here -> https://prnt.sc/a5t3NYI-ApGL The popup should have a border when it’s opened -> https://prnt.sc/8CU8V8SU6C4D Seems to function correctly.
Or you could use some CSS to add the border radius -> https://prnt.sc/pjFjgJCQ-xji
Or if you want just the left top and left bottom corners to be rounded -> https://prnt.sc/x2_-ffQE1xCD
Here are both codes, first case and second:
#tdm-popup-modal-2142 .tdm-popup-modal {
border-radius: 25px;
}
#tdm-popup-modal-2142 .tdm-popup-modal {
border-radius: 25px 0 0 25px;
}
It’s all CSS basically, either using a setting or a code directly.
2. Rows can be made sticky. If you add the popup button in a new row of it’s own, then you can make that row sticky either at the top or at the bottom -> https://prnt.sc/z7msbWVW4qmS You could try it like that.
Let me know how it goes.
Thank you!
Okay so the custom css worked for the border radius.
The sticky worked also – For some reason, it was not working properly the other day when I tried. odd.
But the only issues I’m still having with the modal popup is that a scrollbar is appearing within the popup on the right side: https://imgur.com/a/fhcQG2g
and the dropdowns for sub menu are not visible on the page (they may be hidden by the scrollbar).
I can fix the dropdowns with css styling.
I can’t figure out how to get rid of the scroll bar, though!
The scrollbar appears because the height is too low, so to display all the content from the popup it requires scrolling.
Right now the height is set to 400px from what I see. If it would be set to a minimum of 510px, then the scrollbar won’t be needed -> https://prnt.sc/VrXiAgZAdxyr
I suggest setting the height to 510px -> https://prnt.sc/ZDmXuXz8OFiO which should remove the scrollbar.
Thank you!
Simon – you are the man! That worked perfectly.
Thank you so much for your super detailed responses!
