Mobile header looks very very ugly. why?

This topic is: Resolved

This is a PRIVATE forum for verified users only, to view the replies/answers, you must be logged in!

Tagged: 

This topic contains 10 replies, has 4 voices, and was last updated by  Erick 1 year, 12 months ago.

  • Author
    Posts
  • #5457

    Erick
    Member
    Post count: 1018

    why does my logo looks like this? Is there a way to fix? my phone is a nexus 5 with 3 inches horizontally and the logo cannot be made smaller since it will not look good.

    https://www.dropbox.com/s/zo927fp99pu5uw4/Screenshot_2014-12-02-19-40-25.png?dl=0

    I want to make it look like this

    https://www.dropbox.com/s/suu9m90zowlxen3/Screenshot_2014-12-02-19-46-54.png?dl=0

    that picture was taken using the theme from wptouch themes.

  • #5460

    mrmad
    Member
    Post count: 11

    Are you using the wptouch Plugin for the mobile website? That doesn’t look like sparkle.

  • #5468

    Erick
    Member
    Post count: 1018

    You totally missed the point. What I am saying is that the first picture I posted is from sparkles theme and it sucks, the second one is from wptouch themes and works like a charm…and its FREE.

    You can see the same annoying mistake in this website: womenlovetech.com use your phone browswe so you know what I mean.

    IS THERE A WAY TO FIX THIS

    Thanks

  • #5487

    Jacob
    Staff
    Post count: 2323

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #5576

    Erick
    Member
    Post count: 1018

    I did use it and worked but I am still having trouble, since it doesn’t look that good. I was wondering if there is a way to make the logo bigger in the mobile header and also more centered

  • #5595

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #5620

    Erick
    Member
    Post count: 1018

    It did make the letters bigger but made the menu unresponsive. Also is there a way to make the mobile header black without changing the desktop background color as well. I already mentioned it in another thread.

    Thanks Maxxi

  • #5621

    Erick
    Member
    Post count: 1018

    I was able to modify it a bit, but i couldnt make the menu open. I was wondering how to use another logo for the mobile version.

    /* Custom CSS*/  
    
    @media (max-width: 991px){
    .main-navigation ul.menu>li.site-mobile-menu-logo{
    	width: 100%;
    	text-align: center;
    	padding: 3px 3px;
    
    }
    .main-navigation ul.menu > li.site-mobile-menu-toggle{
    	position: absolute; 
    	background: transparent;
    	left: -5px;
    }
    .main-navigation ul.menu>li.menu-item-gsearch{
    	position: absolute;
    	right: -10px;
    }
    
    html .site-banner .site-logo img{
    	width: auto;
    	height: 40px;
    	max-width: 100%;
    	padding-bottom: 6px;
    }
    }
    }
    .main-navigation ul.menu > li.site-mobile-menu-toggle{
    	position: absolute; 
    	background: transparent;
    	left: -5px;
    }
    .main-navigation ul.menu>li.menu-item-gsearch{
    	position: absolute;
    	right: -10px;
    }
    
    html .site-banner .site-logo img{
    	width: auto;
    	height: 65px;
    	max-width: 90%;
    }
    }
    • This reply was modified 1 year, 12 months ago by  Max. Reason: wrap the code with code block
    • This reply was modified 1 year, 12 months ago by  Max. Reason: wrap the code with code block
  • #5653

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #5654

    Max
    Staff
    Post count: 3150

    Hey there, You must be logged in to view this reply!

    Login | Register | Forgot Password?

  • #5683

    Erick
    Member
    Post count: 1018

    Thanks maxxi! its working great now! I think is time to click that resolved button 🙂

You must be logged in to reply to this topic.

This is a PRIVATE forum for verified users only, to view the replies/answers, you must be logged in!