Mobile Logo

Support Area Forums Grassroots Mobile Logo

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question: http://
  • Author
    Posts
  • #32256
    JC Poma
    Participant

    Hello,
    My site is experiencing the same issue with the Logo at certain resolutions, where half the screen is taken up by the Logo. Please see: http://staging.thedoorways.org/ and view it in portrait and landscape view on a smart phone. Portrait view is fine…landscape is not. I tried to apply the same CSS fix that Bill mentioned above, but it did not resolve the issue.

    Did you ever find a solution for this?

    Thanks in advance,
    David

    #32260
    JC Poma
    Participant

    This is similar to the following forum discussion: https://support.organizedthemes.com/forums/topic/mobile-optimisationn/

    #32263
    Bill Robbins
    Moderator

    Hi David,

    Sorry for the trouble there. I split this off onto a separate topic since the other question was for the Elite theme and it looks like you’re using Grassroots here.

    You can adjust the logo size for different sized screens. Here’s one way to go about that:

    1. Go to your theme options page and choose the Advanced tab.
    2. Scroll down to the Custom CSS box and add this:
      
      @media only screen and (min-width: 1200px) {
      	
      	nav#top-menu {
      		top: 45px;
      		position: relative;
      	}
      	
      }
      
      @media only screen and (min-width: 1024px) and (max-width: 1199px) {
      
      	#logo {
      		max-width: 300px;
      	}
      	
      	nav#top-menu {
      		top: 25px;
      		position: relative;
      	}
      
      }
      
      @media only screen and (max-width: 1023px) {
      
      	#header #logo {
      		max-width: 200px;
      	}
      	
      	.slicknav_menu {
      		top: 25px;
      	}
      	
      }
      
    3. Update your settings.

    That will also help center the navigation bar vertically next to your logo. Let me know if you have any trouble or questions.

    Thanks,
    Bill

    #32268
    JC Poma
    Participant

    Thanks, Bill.
    That did the trick for the logo.
    Centering the navigation bar vertically causes the Hero Image on the home page (and other pages) to extend down further than desired.
    What do I need to change to only fix the logo and not fix the navigation bar?

    Thanks, as always, for your very prompt replies!

    #32273
    Bill Robbins
    Moderator
    
    @media only screen and (min-width: 1024px) and (max-width: 1199px) {
    
    	#logo {
    		max-width: 300px;
    	}
    
    }
    
    @media only screen and (max-width: 1023px) {
    
    	#header #logo {
    		max-width: 200px;
    	}
    	
    }
    
    #32275
    JC Poma
    Participant

    Perfect!
    Thanks again!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Mobile Logo’ is closed to new replies.