Home>Support>Mobile logo display- Vantage theme

Mobile logo display- Vantage theme

By ocm, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi there, great theme! Just a minor issue:

In small devices, my logo in menu displays above the mobile main menu and it has a lot of spacing, making the site look not so hot. I have tried your code from this post: https://siteorigin.com/thread/mobile-device-space-below-logo/ but still no joy. Please let me know what I can do to fix it.

Here is an example of what I mean:

http://tinypic.com/view.php?pic=5yu7on&s=8#.VHHDKIvF__Y

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi ocm

    Thanks for running Vantage.

    I’m sure we’ll be to help here but would need to see the site live to provide a CSS fix. Can you send through a link?

  2. 9 years, 10 months ago ocm

    Sure, and thank you. It’s http://www.onlinecasinomatch.com

  3. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Thanks. Try something like the following under Appearance > Custom CSS:

    /* Mobile Logo */

@media (max-width: 480px) {

header#masthead.masthead-logo-in-menu .logo > img {
max-width: 95%;
}

}

    Adjust as required.

  4. 9 years, 10 months ago ocm

    Thank you, I tried that, and even had it down to 55% just to see, but the menu is still way under the logo.

  5. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Please check your Custom CSS. It’s possible that you haven’t closed your first media query, so another media query placed at the end of those selectors won’t take effect.

  6. 9 years, 10 months ago ocm

    Well, no, when I added the css you gave me, it showed the changes. In other words, the logo was squeezed down to whatever I specified, the problem is, the mobile menu is still not moving up to sit right next to it. I hope that makes sense. If not, I’ll do a screenshot again, but basically it looks the same but the logo is smaller.

  7. 9 years, 10 months ago ocm

    Hey, thanks for all your help. I decided to look into my style.css and found:

    body.responsive header#masthead.masthead-logo-in-menu .logo {
    margin-left: 20px;

    I changed it to zero, and it’s fine now. :)

  8. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    It’s showing next to the logo on my phone now. Perhaps check that you’ve refreshed your phone’s browser a few times. I had to.

    On another note, there are errors in your Custom CSS that might cause problems later, check this section:

    @media (max-width: 480px) {
  .roster_slider {
max-width: 100% !important;
 }
  
  .lcp_paginator
  max-width: 100% !important;
 } 

  .lcp_paginator span,
.entry-content .pagination span,
.lcp_paginator a,
max-width: 100% !important;
 } 
}

    That should read:

    @media (max-width: 480px) {
  .roster_slider {
max-width: 100% !important;
 }
  
  .lcp_paginator {
  max-width: 100% !important;
 } 

  .lcp_paginator span,
.entry-content .pagination span,
.lcp_paginator a {
max-width: 100% !important;
 } 
}

    I was wrong about the closing media query, but two selectors there are missing opening curly brackets.

  9. 9 years, 10 months ago ocm

    Thank you very much, will make those changes!

  10. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    For sure. Glad we could help.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More