Hello @martin177,
Your website is in maintenance mode, and I don’t know which style you currently use for the mobile header menu. If it’s not the default header menu, you should write a custom CSS for the wrapper of the menu box like the following CSS. You can put the CSS below in Customizing > Custom CSS/JS > CSS Code:
#mobile-dropdown {
border-radius: 10px !important;
}
Please read this link for more information about the CSS/JS code on the Customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.
Please check the widget’s settings to see if the menu is an Elementor widget. Perhaps the widget had styling options for that.
Regarding the different styles on mobile, for the typography, if it’s the default menu on the theme, you can change it on Customizer> Typography option(use the responsive option to set different sizes), otherwise please check the widget settings on Elementor responsive sizes(breakpoints).
* Also, you can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/
And for responsive sizes, put your CSS on custom screen size:
@media only screen and (max-width: 480px) {
/* put your custom CSS here*/
}
Or use between sizes:
@media (max-width: 960px) and (min-width: 481px){
/* put your custom CSS here */
}
For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I hope that helps.
Best Regards