Hello @pedrofreitasilva
I hope you are doing well. I am so sorry for the inconvenience.
Unfortunately, we don’t have any responsive design control options for the dropdown mobile menu right now. This is a feature that we are planning to add in the future. However, for now, we can share some custom CSS code that you can use to change the color, size, or alignment of the dropdown mobile menu.
Please copy and paste the following code in the Customizer > Additional CSS section of your WordPress dashboard:
/* Media query for screens with a maximum width of 480px */
@media screen and (max-width: 480px) {
/* Change the background color of the primary menu */
.main-navigation .flexia-primary-menu {
background-color: #000; /* You can change this color code */
}
/* Change the font size of menu items */
.main-navigation .flexia-primary-menu li {
font-size: 18px; /* You can adjust the font size as needed */
}
/* Style for menu item links */
.main-navigation .flexia-primary-menu li > a {
background-color: #bec8d9; /* Customize the background color */
color: #fff; /* Customize the text color */
text-align: center; /* You can change the text alignment */
}
}
Let me know how it goes or if you need any other customization.
Thank You
Hello @pedrofreitasilva
I hope you are doing well.
I wanted to follow up with you regarding the solution I shared with you previously. I have not heard back from you since then, and I wanted to check in to see if you have had a chance to review the solution or if you have any questions or concerns.
If you need any further assistance or clarification, please don’t hesitate to reach out to us. I am more than happy to provide additional information or support as needed.
Thank you for your time and attention to this matter. I look forward to hearing from you soon.
Thread Starter
pfsilva
(@pedrofreitasilva)
Hello Zeba!
Sorry for not replying.
So, with your code I am definitely able to customize the mobile menu now. Thank you so much!
I have a few more questions and I would be greatly appreciated if you can help me out:
Is there any way to instruct the menu to close automatically once it is clicked?
How can I remove the border around each button?
Thank you and sorry again for the late reply.
Hello @pedrofreitasilva
Greetings !
I am sorry, I didn’t quite understand your requirement regarding the menu closing automatically once it is clicked. From my end, this function is already there. Please see the screencast here: https://d.pr/v/dErMy3
Please share some screenshots or screen recording regarding your requirement.
You can remove the border from the dropdown menu by adding this CSS.
@media screen and (max-width: 991px){
.main-navigation .flexia-primary-menu li>a {
border:0px !important
}}
Thank You
Thread Starter
pfsilva
(@pedrofreitasilva)
Sorry for the bad explanation,
I meant: once I click on each menu link(page) I would like the mobile menu to close by itself
Hi @pedrofreitasilva
I am sorry, but I am still not sure about your requirements.
Please see the screencast: https://d.pr/v/nEMgwt
Can you please share a screen recording for my better understanding?
Thank You
Thread Starter
pfsilva
(@pedrofreitasilva)
Yes, it works when the link is to a different page. It doesn’t close if you use anchors as menu links.
Thank you so much for your time, once again.
Hello @pedrofreitasilva
Sorry to disappoint, but that feature is unfortunately not available at this time.
With that being said, there are existing feature requests, so I’ve added your vote to our internal suggestion lists. If your suggestions are something that we’re able to introduce, we’ll be sure to let you know.
If you have any further questions, please let us know.
Thank You
