Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Changing styles for sub-menus

menu
    • 6 years, 6 months ago ChristopherGFox
      Participant

      Hi,

      I am using the sub-menu functionality placed on the left-hand side of the pages (https://www.syncresis.com/2019/?page_id=42)

      I do not like the styling, however. I would want to change the font properties, background color, and transparency. I did not see a Codeless tool for this but I could make changes to the CSS. I just don’t see where to make those changes. Can you please advise?

      Thanks!

    • 6 years, 6 months ago Ruco
      Keymaster

      Hello,

      Some of styling can be changed with Codeless Builder like font stylings, you can also add some custom css into Customizer > General > Custom Css box.

      Let us know.

      Regards!

    • 6 years, 6 months ago ChristopherGFox
      Participant

      Thanks Ruco! I wasn’t able to achieve what I wanted through Codeless Builder. Can you let me know some sample CSS I can add to the Custom CSS box please? That way I can see the right object to style and apply the right fonts, etc. from there.

    • 6 years, 6 months ago Mirela
      Participant

      Hello,

      Try adding this css:

      nav:not(.cl-dropdown-inline) .menu > li > ul.sub-menu {
          margin-left: 145px !important;
          top: 22% !important;
      }
      nav .menu > li > ul.sub-menu {
          background-color: #fafbfd73 !important;
      }
      nav .menu li > ul.sub-menu li:hover, #site-header-cart .cart_list li:hover, #site-header-search input[type="search"] {
          background-color: #fafbfd73 !important;
      }
      nav .menu li ul.sub-menu li a {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 20px;
          text-transform: none;
          color: #4c4949 !important;
      }

      It will give this result: https://postimg.cc/8JXHwqQR

      Best regards!

    • 6 years, 6 months ago ChristopherGFox
      Participant

      Yes, this is working very well. Thank you!!

Viewing 4 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password