how to apply a mobile-only css class

Asked

Viewed 681 times

-2

I’m using the latest version of Opencart to create an online store, and I put the shopping cart in the navigation bar and I want it to be a dropdown when it’s on a desktop and a dropup menu when it’s on a smaller screen. I was able to do the dropup part by adding the "dropup" class in the code as in the image below. I didn’t create this class I just applied from startup. code

php twitter-bootstrap
  • 1

    Please do not put code photos.

  • 1

    Hello Philip! Please see here how to improve your question so that you get a good answer to your problem! If you can, paste the relevant part of your code and check the available formatting tools. Also, take advantage and do the tour, is worth a medal! D

1 answer

4

Simply leave the work to the browser through a CSS Media Query:

@media only screen and (max-width: 760px) {
    /* esconde o elemento de controlo caso em Mobile */
    #el-controlo { display: none; }
}

On your page, you add an empty element that will be hidden when on mobile:

<span id="el-controlo"></span>

Finally, with jQuery you add the desired CSS class if your control element is hidden:

$( document ).ready(function() {

    // se elemento controlo escondido
    if ( $('#el-controlo').css('display')=='none' ) {

        // adiciona classe "dropup"
        $('#meu-elemento').addClass('dropup');
    }
});

The above example can be drastically reduced to a Javascript condition by resorting to Window.matchMedia():

if (!window.matchMedia("(min-width: 760px)").matches) {
    $('#meu-elemento').addClass('dropup');
}

Browser other questions tagged php twitter-bootstrap

You are not signed in. Login or sign up in order to post.