Add class when mobile

Wappler General
#1

I would like to toggle ‘sticky-top’ class to my header when in mobile or tablet view, I can’t understand how to achieve this.

#2

You can achieve this using CSS Media Queries.

e.g.

@media (max-width: 1200px) {
body {
    margin-top: 50px;
}
  .navbar{
    position: fixed;
    right: 0;
    left: 0;   
    border-radius: 0;
    top: 0;
  }      
}

Change the properties and values to suit.

1 Like
#3

Also, you can find the media query dimensions that bootstrap/Wappler use in the Options cog above your profile image in the bottom left hand corner.

It has the pixel width that matches the default phone/tablet views etc.

image
image1170×890 47.7 KB

3 Likes
#4

Thanks for that, I guess media queries is the only approach then? Or maybe I can use jquery to write to the dom. I would prefer to utilise the bootstrap classes and not write too much extra css.

#5

You can use the browser component to check the viewport width and toggle a class (dynamic attributes > styling > class toggle) depending on this.

1 Like
#6

Thanks this is working but I’m not sure if its perfect solution for me to use vw.
I found a library I would like to use but I’m unsure of how to implement it.

Do you use anything like that for here or is it just vw?
image

#7

How does the expression work please, I would like to use viewport for toggling classes in other aspects.
I tried this:
image

It doesnt toggle the class (viewport.width)

#8

Add the browser component on your page and use the expression builder to create the expression for viewport width. Do not enter it by hand like that.

1 Like
#9

Got it! thanks
image

#10

I’ve been trying to understand what the browser component does. Is it worth having on every page at the top level?

#11

The browser component has a number of useful options. This page has a demonstration of all the values it can return.

It may not be necessary to have it on every page (but it might be - depends on the site/app). It would automatically be placed where needed.

1 Like
#12

Thanks Tom, looking at it, I think it’s useful on every page (for our ecommerce site anyway)