• Resolved martin177

    (@martin177)


    Hi there!

    I would love it if the mobile menu of my website had 10px rounded corners. Everything has rounded corners except the mobile menu (see image https://imgur.com/a/xBKxS9R ) and I would love it to change. I know nothing about css except where I need to paste it to and would be grateful if you could provide me with it.

    Also, is there a way to have a different size frame in mobile (10px, #ffffff) than in desktop mode (currently a nice 20px, #ffffff)?

    Thank you loads in advance,
    Martin

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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

    Thread Starter martin177

    (@martin177)

    Thank you so much for your detailed reply, it helped a lot! Sorry I forgot to take the page out of maintenance mode, will remember to do that next time again as well as clear the browser’s cache to check for changes before I write again!

    I really appreciate your patience and knowledge.
    Thank you again!

    You’re very welcome. Glad I could help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘css for rounded courners of mobile menu?’ is closed to new replies.