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

Change color of the hamburger menu icon in Folio

Hamburger Menu Color
    • 5 years, 10 months ago GTP_Dutchy
      Participant

      Hello,

      I’d like to change the color of the hamburger menu icon on my site to #185fa1, How do i do that? I can’t seem to find it elsewhere.

      Cheers,

      Kevin

      • This topic was modified 5 years, 10 months ago by GTP_Dutchy.
    • 5 years, 10 months ago GTP_Dutchy
      Participant

      Also i’m noticing the hamburgermenu geing white on the front page. But on the other pages it’s black. same goes for the typography in the menu.

      roelofsmetrology.nl is the site if you’d like to see it.

    • 5 years, 10 months ago Mirela
      Participant

      Hello,

      Please add this code into your Custom Css box in Customize > General > Custom Codes:

      .cl-hamburger-menu span {
         background-color: #6b97ef !important;
      }

      Let us know if this is what you wanted.
      Best regards!

    • 5 years, 10 months ago GTP_Dutchy
      Participant

      This didn’t do anything for the desptop version. The three bars icon on the frontpage is still white and on all the other pages it’s still black. same goes for the typography in the menu. white on frontpage and black on the other pages. I want the typography in the menu to be white everywhere and the three bars hamburger menu icon to be blue everywhere.

       

      edit: it does seem to display correct color on a mobile phone

       

      • This reply was modified 5 years, 10 months ago by GTP_Dutchy.
    • 5 years, 10 months ago Mirela
      Participant

      Hello,

      That’s because the header light style takes precedence. Please go to file style.css and find this line(1832):

      @media (min-width:992px){
          .cl-header-light .cl-hamburger-menu span{
              background-color: #fff !important;
          }
      }

      Remove !important from it. Save changes. Then add this css in Custom Css box:

      .cl-header-light .cl-hamburger-menu span {
          background-color: #009688 !important;
      }

      Edit the color to your wish.

      Best regards!

    • 5 years, 10 months ago GTP_Dutchy
      Participant

      Thank you, that fixed it for me.

Viewing 5 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