Mobile Menu disappears

shanepfc · November 2014

Hi

If i test my website under a width of 768px the menu disappears & the text part of my logo disappears. Please advise

http://pfc-websitedesign.co.za/cloudpax/

Thanks Shane

Albert · November 2014

Hi Shane,

as we see your menu does not disappear but transform for smaller devices menu layout so everything is fine. If you want to keep standard menu instead of responsive on smaller devices then please take a look at http://forum.muffingroup.com/betheme/discussion/29/responsive-toggle-value

However logo looks good. We did not noticed anything wrong with logo so if you noticed then please explain in which browser and what computer. Will be great if you can also make a screenshot of what happen.

shanepfc · November 2014

Hi i am using firefox 33.1 please see attached screenshots - i use cybercrab to test different sizes , i also tested using devices Ipad & samsung S4 galaxy.

I have some screen images - how do i attach them to my post?

thanks Shane

Albert · November 2014

You can attach images for example via http://snag.gy/ or http://pasteboard.co/

shanepfc · November 2014

Thanks

Please see the following images:

1) http://snag.gy/feEbU.jpg
2) http://snag.gy/nX0CW.jpg
3) http://snag.gy/7Dbtf.jpg

Thanks Shane

Albert · November 2014

Ok we see what happen now. Please use below css and this should help you:

#Top_bar, #Action_bar { background-color: #426999 !important; }

shanepfc · November 2014

Hi

The code has helped but can you help me get rid if the black section under my blue header - please see image:

http://snag.gy/OWcTz.jpg

Thanks Shane

Albert · November 2014

To do that, please go to Theme options > Layout > Header section and turn ON "Header | Minimalist" option.

shanepfc · November 2014

Hi

When i turn on header minimalist it completely changes my exisitng website - hiding the top portion of the pages etc.

Is there no way to decrease the header height thereby hiding the black portion for all devices under 768px width.
Thanks Shane

Albert · November 2014

So if you want to hide this section for devices under 768px then you must use below custom css instead:

@media only screen and (max-width: 768px) { body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; } }

shanepfc · November 2014

Thanks for that - it works perfectly!!

Shane

shanepfc · November 2014

Hi

My apologies but i encountered a problem - the mobile devices are fine except now for devices with 768px width.

When i test with 768px a white line appears above my header & it is cutting off my my custom heading text as well.

PLease see pic http://snag.gy/ntN4j.jpg

Thanks Shane

Albert · November 2014

Sorry but we do not see any problem on image above and we have no idea what exactly does not work for you this time. But if you want to play with other sizes, then please change 768px value that we gave in last topic to something else.

shanepfc · November 2014

sorry wrong pic - please go here http://snag.gy/FWVd5.jpg

Albert · November 2014

This happen because of below css. Please replace below css:

body:not(.template-slider):not(.header-simple) #Header {
    min-height: 0 !important; }

with:

@media only screen and (max-width: 479px) {
    body:not(.template-slider):not(.header-simple) #Header {
        min-height: 0 !important;
    }
}

shanepfc · December 2014

Hi Sorry for delay in getting back to you.

I have replaced the css but the problem is still there at 768px?

Thanks Shane

Albert · December 2014

So if you replaced this code and still don't work then we have no idea what could be wrong. Probably the problem is cache or something else but we have no idea what else exactly because we tested it on our side and works fine.

Mobile Menu disappears

Comments