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

Mobile Header Covers Logo

Mobile
    • 8 years, 3 months ago EngeniousDesign
      Participant

      Expired

      When in portrait mobile mode, the menu icon (hamburger) is sitting on top of (in front of) my header logo image, as shown in image below. Is there someway to fix this?

      • This topic was modified 8 years, 3 months ago by EngeniousDesign.
    • 8 years, 3 months ago Mirela
      Participant

      Hello,

      Please add this code into your custom css box:

      @media (max-width: 480px){
      #logo { width: 88% !important;}
      #logo img.dark { width: 100% !important;}
      }

      Let us know.

      Best regards!

    • 8 years, 3 months ago EngeniousDesign
      Participant

      Expired

      Thank you! That worked, kind of. It seems to have just squished the width of the logo – it didn’t preserve the aspect ratio. Is there a way to do that?

    • 8 years, 3 months ago Mirela
      Participant

      Hello,

      First of all, do not put the custom css for the logo in the home page’s custom css. If you do then it will affect only the home page. While all other pages will have the large logo version.
      I edited out the code to this:

      @media (max-width: 480px){
      #logo img.dark { 
       width: 100%;
       padding-left: 30px !important; 
      }
      }

      I added it in the General Options > Custom Css box. So it will affect all pages. Please check your site.
      Let us know.

      Best regards!

    • 8 years, 3 months ago EngeniousDesign
      Participant

      Expired

      Thank you very much for helping me locate the overarching CSS location. I knew it had to exist!
      However, when I look at my other pages, the menu is still hovering over the logo.

      • This reply was modified 8 years, 3 months ago by EngeniousDesign.
    • 8 years, 3 months ago EngeniousDesign
      Participant

      Expired

      It’s working now! Thank you

    • 8 years, 3 months ago Mirela
      Participant

      Great!
      After every css change make sure to clear cache and refresh pages. This way they will load with the new changes.

      Best regards!

    • 8 years, 2 months ago EngeniousDesign
      Participant

      Expired

      Sorry to come back to this, but can I move the hamburger menu further to the left? I’m looking for more space in between the logo and the menu as I’ve accidentally hit the logo instead of the menu a couple times.

      I’ve been trying to play with the padding in the CSS code, but nothing is moving (even after I clear my cache).

      thank you

      • This reply was modified 8 years, 2 months ago by EngeniousDesign.
    • 8 years, 2 months ago Mirela
      Participant

      Hello,

      Please edit the last code to this:

      @media (max-width: 480px){
      #logo img.dark { 
       width: 100%;
       padding-left: 30px !important; 
      }
      .mobile_small_menu {
          margin-left: -18px !important;
      }
      }

      We added this code: .mobile_small_menu { margin-left: -18px !important;} inside the mobile block (@media 480px). Edit the value to your wish.

      Best regards!

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