Home>Support>Hide row on mobile devices.

Hide row on mobile devices.

By LisaS, 23 days ago. Last reply by LisaS, 3 days ago.

Hi there,

I am new to WordPress so I am looking for a newbie solution to my problem.
My webiste www.nachtwinkeldenachtuil.nl has a menu that isn’t a menu. The theme menu is terrible so I don’t want to use that.
I would like to hide the ‘fake’ menu on mobile phones, because I have added a mobile menu plugin.

I found a plugin that allows me to disable elements by adding [notdevice][/notdevice]. This works but leaves blue lines.
Plus the tablet version doesn’t do what I want it to. The mobile menu doesn’t recognize the tablet version as mobile (don’t want it to) but the code does.
So tablets have no menu at all.

Anyway I am looking for a solution and think I found it on this forum.

Hide row on mobile and show row on desktop

The problem is I am new and don’t understand it. I don’t understand what to do and how to do it. It’s like a mysterious language.
I want to learn and don’t want my site to crash right away.

Can someone help me with this?

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 14 days, 4 hours ago Alex S Hi, I Work Here

    Hi Lisa,

    The linked thread is using CSS to accomplish this. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:

    @media (min-width: 601px){
    	.mobile-show {
    		display: none !important;
    	}
    }
    @media (max-width: 600px){
    	.mobile-hide {
    		display: none !important; 
    	}
    }
    

    Now instead of using the shortcode plugin you’re using you simply need to open the row (or widget) and head over to the row/widget styles sidebar. Open the Attribute settings group and set the Row/Widget styles class to either mobile-show (this row/widget will only show on mobile devices) or mobile-hide (this row/widget will only be visible on tablets and computers). Does that make sense?

    You might also need to install the SiteOrigin CSS Editor.

  2. 12 days, 18 hours ago LisaS

    Hey Alex,

    Thank you for your help!
    Finally something I do understand.

    I succesfully installed the CSS editor and added the code on my .eu site.
    This is my cloon site and playarea.

    It works great, but doesn't solve the problem of the blue line.

    I hoped hiding the whole row would solve this. Maybe I should look for an other way to show the menu instead.
    Anyway thanks for the help!

    Lisa

  3. 12 days, 4 hours ago Alex S Hi, I Work Here

    Hi Lisa,

    I’m not too sure what line you’re referring too. Can you please send me a screenshot of the line? Please note that we’re unable to process attachments so you’ll need to upload the image to a third party image hosting site like Imgur or vgy.me.

  4. 11 days, 16 hours ago LisaS

    Hey Alex,

    I made a screenshot of the mobile version of the .nl site were I used the plugin and shortcode. https://imgur.com/a/zJQUP
    The two blue lines are from this 'fake' menu. https://imgur.com/a/vAp8W
    When I implement your hide row solution it changes to this.
    https://imgur.com/a/D2kkq <https://imgur.com/a/D2kkq&gt;

    I hope you are able to see the images this way.

    Thanks!

  5. 7 days, 2 hours ago Alex S Hi, I Work Here

    Hi Lisa,

    To clarify, are you adding the class to the row or the widget? As you’re applying design styling (ie the blue background and line) you’ll need to hide the row rather than the widget – in other words, you need to add mobile-hide to the row rather than the widget.

  6. 3 days, 11 hours ago LisaS

    Hey Alex,

    Thanks for your reaction. I tried to add it to the row first. When that did’t work I tried it on the widget itself. Both without the result I was hoping for. The only thing that changes is it had two blue lines and now it has one.

    Lisa

Please log in to post on our forums. Signing up is free.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More