How to remove overlapping of the logo and hamburger menu and making top nav content responsive

Hi,
My site on mobile views shows
1. Top nav content not responsive on mobile phones e.g samsung-galaxy, blackberry especially the contact phone number
2. The logo and hamburger menu overlaps and clashes together. How can make them distinct.
Shot: http://awesomescreenshot.com/0355ak2kcd
Link: mobile view test: http://mobiletest.me/iphone_5_emulator/?u=http://www.kaisteventures.com
my site: http://kaisteventures.com

With Regards

  • Predrag Dubajic
    • Support

    Hey @Barni,

    Hope you had a nice weekend :slight_smile:

    I checked your site with inspector tool and there is already solution in your code for logo issue but the code has a typo in it and because of that it's not working.
    Can you check if in custom CSS code you have something like this:

    @media only screen and (max-width: 479px) {
    #trueHeader #logo img {
        max-with: 80%;
    }
    }

    And instead of max-with change it to max-width

    As for the issue with the contact info in header can you try applying this fix:

    @media screen and (min-width: 480px) {
    	ul.top-meta li {
    	    width: 100%;
    	    float: left!important;
    	}
    
    	body .top-meta li:last-child {
    		float: left!important;
    		text-align: left;
    	}
    }

    Best regards,
    Predrag

  • Barni
    • The Bug Hunter

    Hi @Predrag Dubajic,
    Trust you are good today. Millions thanks for the fix.Works now especially the logo and hamburger are now solved.

    Quick one please; How can I create alternate image for layerslider used for mobile phones that can't view the video?
    url://http://kaisteventures.com

    Regards

  • Predrag Dubajic
    • Support

    Hi Barni,

    Seems the desktop top nav content has been affected. How can I make them spread out on desktop view. Shot: http://awesomescreenshot.com/0e95aofccc

    My bad, can you try replacing that second code I gave you with this one and see if that does the trick:

    @media screen and (max-width: 480px) {
    	.top-meta li {
    	    width: 100%;
    	    float: left!important;
    	}
    
    	body .top-meta li:last-child {
    		float: left!important;
    		text-align: left;
    	}
    }

    Quick one please; How can I create alternate image for layerslider used for mobile phones that can't view the video?
    url://http://kaisteventures.com

    If you are using slider in the content we can do something like this.
    What you need first is to create new slider which will be only the image that you want to show on mobile phones.
    After that install this plugin https://wordpress.org/plugins/insert-php/
    And then replace your current slider shortcode with this:

    [insert_php] if (!is_mobile()) {[/insert_php] [av_layerslider id='5'][insert_php]}[/insert_php]
    [insert_php] if (is_mobile()) {[/insert_php] [av_layerslider id='10'][insert_php]}[/insert_php]

    You just need to enter correct ID's now, 5 is the ID of your video slider that will show on desktop and 10 is the image slider to show on mobile devices.

    Best regards,
    Predrag

  • Barni
    • The Bug Hunter

    Hi,
    Interesting @Predrag Dubajic, thank very much you but...
    1. The new snippet didn't effect the desired change. I've off caching on my site and the change wasn't effected.

    2. This is fascinating, however, Mr Jude had given me a snippet and I hope it work but in if it doesn't, I might take a pull on yours. Here it is;

    /* LSlider img bg for mobilephones */
    @media screen and (max-width: 480px) {
    p.ls-l.ls-video-layer.ls-videohack {
    display:none ;
    }

    .ls-slide.ls-animating{
    background-image: /kasite-mobile-img.jpg;
    z-index: 999;
    }
    }

    Thank you once again....

  • Predrag Dubajic
    • Support

    Hi Barni,

    Huh, it looks like it's not my day, second CSS for you today that is not working :slight_smile:

    Could you grant support access so I can try fiddling with the code a bit to see why it's not working?
    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    2. This is fascinating, however, Mr Jude had given me a snippet and I hope it work but in if it doesn't, I might take a pull on yours. Here it is;

    This does look like a faster solution, go with that first :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.