Hi,
I would like to make three changes to the mobile menu, once displayed.
First, the background, by default is a gradient from black to blue, I will need to be from white to green. Second, how can I specify that the displayed mobile menu would be about 50% of the screen (wide), not 100%.
And last, is it possible to add an horizontal line to separate the categories?
Thanks
Hi,
The mobile background color can be changed in the theme panel like this if you are not using the mobile plugin
– https://www.screencast.com/t/oG3loRRD
When the mobile theme plugin is active, the changes need to be made in the mobile section
– https://www.screencast.com/t/vunWfamxI91m
There is no option to modify the width of the mobile menu. It could only be done with custom code. That is the case for the horizontal line that you mention, between the menu items.
If you could provide a link to your website and more details about what exactly you are t trying to do, I will try to give you a solution.
Thanks
Hello enrique00,
As you want to achieve involves such a custom work, sorry! Notice that we cannot provide this type of services at the moment, sorry! However, you can provide your website URL and also, give me some useful screenshots to exemplify what exactly you want to achieve and also, so I can provide some hints in this case.
Thanks for your understanding!
Heyy guys. 🙂
I was wondering about the same thing. The menu displayed on mobile covers the whole screen. https://www.screencast.com/t/nt8fYvuvfuSI
It would great if it was possible to customize it so it doesnt cover everything.
as enrique00 said around 45-50% wide would be preferred, which is what i also want if possible 🙂
And adding an horizontal line to separate the categories and some spacing
Something like this would awesome. Its the look im kinda going for, but it shouldnt be like 100% accurate. some changes would be cool. just for inspiration purpose.
https://www.screencast.com/t/2xeIUjHhDAHJ
ps my site is called: https://www.ciaao.dk
Hi,
You could try a code like this, to modify how the mobile menu displays
– https://www.screencast.com/t/W5biIPBy5C
There might be more modifications needed, but this will give you a starting point if you want to make further customization. You can test the code and see if it is working properly.
Enter it in Theme panel->Mobile theme->Custom CSS section (you can test with other values by modifying the code)
.td-menu-background,
.td-mobile-container {
width:50%;
height: 50%;
}
.td-mobile-container .td-menu-socials {
height: 120px;
}
.td-mobile-main-menu li a {
border-bottom: 1px solid black;
padding: 15px 45px 15px 15px;
}
Here is a link to a tutorial about using the browser inspector to identify the elements on the page and their classes, in order to create custom code
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
The code can then be used in the theme panel custom code sections.
Thanks
