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

Tower: Mobile Logo Overlapping & Not Responsive

logoMobileresposniveTower
    • 7 years, 10 months ago MG
      Participant

      Expired

      Hello,

      How can I correct the overlapping logo with hamburger menu and make sure the logo is responsive?

      site: https://bit.ly/2vFmdIk

      Thanks

    • 7 years, 10 months ago Mirela
      Participant

      Hello,

      I checked your site in mobile but it looks ok. Please see this screenshot of how it looks when i access it: https://postimg.org/image/q2qx1oqh1/

      Did you already fix it? Let us know.

      Best regards!

    • 7 years, 9 months ago DIMAX
      Participant

      Expired

      Hi, Mihaila!

       

      I actually have the same problem, please see my website http://www.dimaxgroup.com/test

      The logo is ok on desktop version, however on ipad it moves to the side and on iphone it overlaps the menu .

       

      Please advise how to fix that

      Thank you!

       

    • 7 years, 9 months ago Mirela
      Participant

      Hello,


      @DIMAXGROUP
      ,
      Please add this code into your custom css box:

      @media (max-width: 480px){
      .header_11 #logo {
          margin-right: -20px !important;
          top: 28% !important;
      }}
      @media (max-width: 979px){
      #logo img {
          top: 49% !important;
          margin-right: 90px !important;
      }}

      Result screenshot:
      iphone: https://postimg.org/image/or4z8n40b/
      ipad: https://postimg.org/image/z2hc1go1n/
      Change the values to your wish.

      Best regards!

    • 7 years, 9 months ago DIMAX
      Participant

      Expired

      Thank you for the help.

      I did it and it worked, but not for all.

      One problem is with ipad, when I open the home page in landscape mode, it is all good. but when I rotate the ipad into portrait mode then it moves to the right.

      Also, the images below the top header in the same rotated portait mode on ipad get squeezed. See the link with pic below please.

      Can you suggest a correction to that?

      Thank you!

      https://postimg.org/image/53fwuxdv1n/

    • 7 years, 9 months ago Mirela
      Participant

      Hello,

      Please add this code to target the ipad profile layout:

      @media (max-width: 769px){
      #logo img {
          top: 49% !important;
          margin-right: 90px !important;
      }}

      The images below are in a row of 4 columns. In ipad width they will have to adapt to the smaller screen width. So the space for the images will be limited. You can increase it, but it will result in 2 images per row or more.
      Add this code:

      @media (min-width: 768px){
      .vc_col-sm-3 {
          width: 49%;
      }}

      Result screenshot: https://postimg.org/image/998ffis5ln/ Change the values to your wish.

      Best regards!

    • 7 years, 9 months ago DIMAX
      Participant

      Expired

      thank you, I will do that.

      In the meantime, could you tell me why this happened(see screenshot). the whole header part just shifted to the right:(

      How do I fix that?

      Thank you!

      https://postimg.org/image/23z3q6l9kb/

      https://postimg.org/image/903rad4rej/

       

      • This reply was modified 7 years, 9 months ago by DIMAX.
    • 7 years, 9 months ago Mirela
      Participant

      Hello,

      What changes did you do to the site? The menu items are duplicated. Please fill in the wp login information on the extra information fields of your profile data. So we can give it a closer look.

      Read this article for more information.

      Best regards!

    • 7 years, 9 months ago DIMAX
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 9 months ago Mirela
      Participant

      Hello,

      The wp login is nore than enough for now. I removed the duplicated menu items and this is the result:
      ipad landscape: https://postimg.org/image/1l2pryalqj/
      ipad profile: https://postimg.org/image/83dozfvb0b/
      iphone landscape: https://postimg.org/image/59nb05rxa3/
      iphone profile: https://postimg.org/image/1t87twdpe3/

      Let us know if there is anything else you wish to change here.

      Best regards!

    • 7 years, 8 months ago DIMAX
      Participant

      Expired

      This reply has been marked as private.
    • 7 years, 8 months ago Mirela
      Participant

      Hello,

      Please go to the page’s General Settings > Page Options & Style > Header Color Style for Header, select the dark version.
      See screenshot: https://postimg.org/image/1ilgd39bjf/
      Let us know.

      Best regards!

    • 7 years, 8 months ago DIMAX
      Participant

      Expired

      my apologies, could you please double check, I changed what you mentioned but the only thing that changes is the header background, not the menu items(home, about us, …).

       

      Thank you!

    • 7 years, 8 months ago Mirela
      Participant

      Hello,

      Please check your site. I fixed it.
      We will make the necessary check ups and fix this in the next theme update if needed.

      Best regards!

    • 7 years, 8 months ago DIMAX
      Participant

      Expired

      Thank you for the help, I appreciate it, it looks fixed now.

      While I was building the website, I encountered a problem and wondering if you can help or suggest where to look for the answer – in my products page, you can see multiple products. however, when i hover over one of them, it does not highlight it or make it visible that I am poiting to that particular product. Is there a way to create sort of a temporary border around each product that I hover over at the moment? Please advise.

      Thank you!

    • 7 years, 8 months ago Mirela
      Participant

      Hello,

      By default the products get an overlay when on mouse hover.
      I see you are using services to show up your products, not woocommerce. In this case use custom css to add overlay on hover. Example code:

      .services_medium img:hover {
          background-color: rgba(80, 75, 75, 0.76) !important;
      }

      To add overlay. Or this:

      .services_medium img:hover {
          width: 170px !important;
          height: 170px !important;
      }

      To make differences on image width on hover.

      PS: Please open new ticket for new questions. This ticket is already overloaded and has lost it’s initial purpose. Thank you for your cooperation.

      Best regards!

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