Reponsive mode event handler


#1

regarding website: http://sydney.onlinehubcenter.com/

I need a way to determine if the website is viewed in responsive mode: tablet and smartphone or anything other then a desktop computer. also, i need a way to determine when the website is viewed in normal mode just desktop.

Is there an event handler for this or css perhaps or both?

My goal is to make a few links disappear in the header menu bar when the website is in responsive mode: anything other then deskop view. And make the links come back when the website is in normal desktop view mode. I am doing this because these links at the top menu bar: “our programs”, “career”, “donate”, don’t render nicely in responsive mode.

thank you,
-tony


#2

Hello Tony, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 767px) {
    #second_menu {
        display: none;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.


#3

the above css works only on smart phone. But i also need it to work with tablets. I tried a ipad and it did not work. any ideas? I basically need this work for anything other then a desktop computer.
thanx
-tony


#4

Hello Tony,

You can experiment with breakpoint by changing the max-width value in CSS code above.

The theme layout changes depending on width, and not browser User Agent. So you actually can see mobile layout when you shrink browser window on desktop computer.

You might want to check this page:

Kind Regards, Roman.