Hi Chi-K,
To hide subcategories from the sidebar, you can use the following CSS code:
#Mod201 ul.mod-articlescategories li:nth-child(3),
#Mod201 ul.mod-articlescategories li:nth-child(4),
#Mod201 ul.mod-articlescategories li:nth-child(6),
#Mod201 ul.mod-articlescategories li:nth-child(7) {
display: none;
}
About the categories list on mobile, I have updated the /templates/ja_alpha/html/mod_articles_categories/portfolio.php
<div class="filter sort-by">
<div class="filter-by-category select">
<span class="current-select">Select a category</span>
<ul class="categories-portfolio categories-portfolio <?php echo $moduleclass_sfx; ?>">
<li <?php if ($_SERVER['PHP_SELF'] == Route::_($url_)) echo ' class="active"';?>>
<a href="<?php echo Route::_($url_); ?>">
<?php echo Text::_('TPL_ARTICLES_CATEGORIES_ALL');?>
</a>
</li>
<?php
require ModuleHelper::getLayoutPath('mod_articles_categories', $params->get('layout', 'portfolio').'_items');
?></ul>
</div>
</div>
<script>
// Function to check if the device is a mobile device based on screen width
function isMobile() {
return window.innerWidth <= 576; // Adjust the threshold as needed
}
// Function to update the text of the .current-select span
function updateCurrentSelect() {
var selectedCategory = $('.categories-portfolio li.active a').text();
$('.filter-by-category .current-select').text(selectedCategory || 'Select a category'); // Set default text if selectedCategory is empty
}
// Load the JavaScript code only for mobile devices
if (isMobile()) {
$(document).ready(function() {
// When the page is loaded, set the initial text of the .current-select span
updateCurrentSelect();
// When a list item is clicked, update the text of the .current-select span
$('.categories-portfolio li').click(function() {
updateCurrentSelect();
});
});
}
</script>
And add the following CSS code to your custom.css file:
.current-select {
display: none;
}
@media (max-width: 556px) {
.current-select {
display: block;
}
.filter-by-category {
display: inline-block;
position: relative;
width: 200px;
border: 1px solid #ddd;
padding: 5px 12px;
}
.current-select::after {
content: "\f0d7";
font-family: 'FontAwesome';
font-size: 0.8em;
margin-left: auto;
position: absolute;
right: 6px;
top: 10px;
}
.filter-by-category .categories-portfolio li {
margin: 0 10px;
padding: 6px 0;
}
.categories-portfolio {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: 100%;
width: 100%;
left: 0;
display: none;
border: 1px solid #ccc;
background-color: #fff;
z-index: 1;
}
.filter-by-category:hover .categories-portfolio {
display: block;
}
}
