Livemesh Support

Support forum for WordPress Themes and Plugins by LiveMesh

Skip to content
  • Support Forums
  • Knowledge Base – FAQ
  • Inbox
  • Register for Support
  • Login
  • Logout
  • Password Reset
  • Account
  • User

Logo on Mobile is not aligned properly

Support Forums for LiveMesh Themes & Plugins › Forums › Enigmatic Theme Support › Logo on Mobile is not aligned properly

Tagged: icons, iPhone, logo, menu, mobile, responsive, social

  • This topic has 4 replies, 3 voices, and was last updated 11 years, 10 months ago by livemesh.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 28, 2013 at 7:14 pm #1016
    websiteitup
    Member

    The logo is fine on my desktop site, but on mobile, it is overlapping with the menu button.

    How do I fix this?

    http://www.goinfinity.net

    Thanks.

    July 1, 2013 at 5:12 am #1023
    livemesh
    Keymaster

    There is a bug in the CSS for logo handling. I will get this fixed in the upcoming update this week. Meanwhile, you can use the following CSS to get the issues for you fixed (pls modify values based on your logo height and width) –

    #header-logo, #site-title a { width: 220px; height: 150px; }
    
    @media only screen and (max-width: 479px) {
    
    #header-logo, #site-title a { width: 150px !important; height: 150px; background-size: 150px !important;} /* Reduce size for smartphones only */
    
    }
    

    If you still have issues, pls email me a temporary login to your site through my ThemeForest profile page. Will help resolve things much quicker. Thanks

    July 3, 2013 at 2:32 pm #1045
    livemesh
    Keymaster

    For your requirements, ignore the above code and, just do the following since you have already set the logo size right through the theme options setting provided –

    @media only screen and (max-width: 479px) {
    
    #header-logo, #site-title a { width: 200px !important; height: 100px; background-size: 200px !important;} /* Reduce size for smartphones only */
    
    }
    

    Made this change on your site, checked on my iPhone and looks fine.

    July 5, 2013 at 2:15 pm #1082
    meermakers
    Member

    Hi!

    First of all, Great theme! You’ve helped me a few times with it, so the support is also great. I used the theme for one client, but he has two similar sites for two target groups. Can I use the theme twice because it’s for one client or do I have to buy an extra licence? I’m happy to purchase it again if it’s necessary. Just give me the word and I’ll buy it right away!

    And now my question:

    I’ve got a similar problem on my mobile phone like the one described above, but none of your solutions work for my site. also the social media icons overlap my revolution slideshow that’s just beneath it.

    The site is live, so could you take a look? http://www.reparatieapp.nl

    In horizontal mode on the iPhone the logo is ok, but the icons are not, in vertical mode, both the logo and the social icons are place wrong.

    I’ll provide a temporary user id for the admin if it’s necessary.

    Thanks again!

    July 6, 2013 at 12:06 pm #1089
    livemesh
    Keymaster

    Hi, checked your site and looks great! Lots of customization done. Here is the code you can insert into Custom CSS to make the logo pains lesser on mobile. Not everything is necessary (like the last line) but still helps. Couple of customizations done for the header is getting carried over to the mobile and messing up the layout a bit –

    @media only screen and (max-width: 767px) {
    .social-container { top: 0; } /* Slightly push the social icons up */
    #header { height: auto; } /* Override the custom height set in Custom CSS */
    #mobile-menu-toggle { top: 90px; } /* Push the toggle button down to stay with social icons since it overlaps with logo */
    
    #site-logo a, .social-container { display: inline-block; text-align: center; } /* Center the logo on small tablets and not just smartphones */
    
    }
    

    You can remove the other code for logo size reduction since it does not apply for squash which embeds the image into the HTML and logo gets resized automatically on screen size reduction.

    Also, unless you run into issues with specific ones, try moving most of the customization code to {theme directory}/custom/custom.css file since that way the css does not need to load for every page request as part of HTML. Let me know here if you run into further issues. Thanks and wish you the best with the site.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Enigmatic Theme Support’ is closed to new topics and replies.

Our Themes

Tags

  • agile
  • appdev
  • austin
  • blog
  • contact form
  • css
  • demo
  • error
  • extinct
  • font
  • fonts
  • footer
  • gallery
  • header
  • home page
  • icons
  • images
  • install
  • installation
  • invent
  • lightbox
  • logo
  • menu
  • mobile
  • navigation
  • page sections
  • peak
  • portfolio
  • primary menu
  • responsive
  • revolution slider
  • setup
  • shortcode
  • shortcodes
  • sidebar
  • slider
  • social icons
  • tabs
  • testimonials
  • theme
  • update
  • video
  • visual composer
  • widget
  • woocommerce
Proudly powered by WordPress