Food Items > Categories in Mobile and Tablet

Yes, you can use a simple trick, if you like the final look.

@media (max-width: 768px) {
.rpress-filter-wrapper {
display: inline !important;
}
}

Fits perfectly for those with few categories.

Be good ??

Thank you very much Playdiune .. is there a way to have it horizontally? like in the attachment:
https://prnt.sc/sl09zp

… and it would be nice to have this food menu on top always.

JUST FOR MOBILE: (dont know if it works on internet explorer 9 and older)

For a nice looking with two columns try this css:

@media (max-width: 768px) {

.rpress-filter-wrapper {
display: inline-block !important;
padding: 0 0px !important;
}

ul.rpress-category-lists .rpress-category-item {
border: 1px solid #999;
width: 50%;
float: left;
border-radius:25px;
}

ul.rpress-category-lists li.rpress-category-item a {
text-align: center;
padding-right: 0px !important;
}
ul.rpress-category-lists li.rpress-category-item a:hover {
border-bottom: none;
}

}

Hope you like it

Be good ??

• This reply was modified 4 years, 10 months ago by playdiune.
• This reply was modified 4 years, 10 months ago by playdiune.

Super ?? working good, thank you ??

Could you please help me with one more thing, how to have this food menu permanently on top? So that when a user select a menu item, it goes to that menu item but the main food menu remains on top, so that user can easily select any other item.

Or second option could be to have a small arrow link (or text TOP) close to “ADD” add to cart button. Perhaps on top or bottom of ADD button. When clicked the page will scroll to the main food menu.

Hello,

Permanently on top is not recommended because if the menu is very large, it will occupy almost all of the mobil screen permanently.

So the best way is to put the button, to go up. To place the button, there are two ways:
1- html + CSS + javascript (it is not possible to create the button without html code added to the plugin).
2- install one of the many plugins (go top button) in the wordpress repository.

If you are ok with html, you can try the option 1 with 3 steps:

Step 1- HTML (lets create the button)
<button onclick=”topFunction()” id=”myBtn” title=”Go to top”</button>

Step 2- Add CSS to the Button
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}

#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}

Step 3) Add JavaScript:
//Get the button:
mybutton = document.getElementById(“myBtn”);

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = “block”;
} else {
mybutton.style.display = “none”;
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Hope i can help you.
Be good ??

• This reply was modified 4 years, 10 months ago by playdiune.

Hello Playdiune,
Thank you for your time and reply. Actually ‘go to top’ button I already have for the site. I was thinking to have a separate dedicated go to food menu button. Which can be placed near the add to cart button. preferably on the top of “ADD” add to cart button.

Hello,

I think that option is being developed by the plugin developers. I think they are programming a button like the one you say that will open a popup with the existing categories. And when that happens, the CSS code that I put here becomes unnecessary ??

I am a normal user of the plugin and can only play with visual changes to the CSS.
So let’s wait for a new version with these improvements ??

Best regards

Yes right ??
But thank you very much for your time and help ??

Thanks guys, we are going to add the categories soon. We are just debating about how we should keep it. We are thinking about 2 options

• A horizontal scrollable categories menu on top of page which will be fixed on top when you scroll
• A categories icon like the cart icon and it will popup the list of categories

Let us know which option would be better ??

Hi Nirmal,

Is it possible to offer both options?

Thanks!

Erin

We can discuss if it would be wise to have both options.

Hello,

I would prefer a category icon like the cart icon.

Thanks

Hello,

For less menu items I think option 1 would be nice and if someone is having many food categories option 2 is better. For example in our case ??

Would be nice to have option to choose a variant. However, in most of the scenarios I think option 2 is better.
Thanks and regards