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

Full width logo for mobile

    • 5 years, 9 months ago jazzmavericks
      Participant

      How do I get the site logo on mobile fit the width of the viewport on mobile? Happy to have the burger menu sit above or below the logo to accommodate…

    • 5 years, 9 months ago Mirela
      Participant

      Hello,

      Add this css into your custom css box in Appearance > Customize > Custom Codes menu.:

      @media (max-width: 480px){
      #logo img {
          height: 300px !important;
      }
      }

      Change value to your wish.

      Best regards!

    • 5 years, 9 months ago jazzmavericks
      Participant

      This works to make the logo larger, but all it does is push the burger menu and social icons off the side of the screen.

      I’d just want the logo full size to fit the width of the screen, then the burger menu and social icons underneath.

    • 5 years, 9 months ago Mirela
      Participant

      Hello,

      Please know that this is a personal customizatin and it’s not included in support. However, i can give you a hint for the custom css, but i need to see a link of the site first.

      Best regards!

    • 5 years, 9 months ago jazzmavericks
      Participant

      sure, it is https://lieannebuckley.maverikmedia.com

      Thanks!

    • 5 years, 9 months ago Mirela
      Participant

      Hello,

      Please add this css:

      @media (max-width: 480px){
      .header_container .header-row-inner {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
      }
      .header_container.header-left.menu_style-simple.menu-full-style.menu-with_shadow.cl-header-light.cl-responsive-header {
          height: 170px !important;
      }
      .main.header-row .c-left {
          order: 1;
          width: 100% !important;
          margin-right: 90px !important;
      }
      .main.header-row .c-middle {
          order: 2;
          width: 20% !important;
      }
      .main.header-row .c-right {
          order: 3;
          width: 20% !important;  
          margin-right: 100px !important; 
      }
      }
      

      Espected result: https://ibb.co/7g30Sfc

      Best regards!

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