Blöcke horizontal

[unique24]

Hallo,

ich versuche für einen Magento 2 Shop eine horizontale Category Menübar zu machen ... an sich habe ich das im groben fertig, aber die Ausrichtung mit all den <a> <div> Blöcken passt noch nicht ganz.

Aussehen soll das so:
[current ParentCat] [parent Cat1] [parent Cat2] [parent Cat3]
----------------------------------------------------------------------------------------------------------------
-> [current Cat] [parent Cat1] [parent Cat2] [parent Cat3]
. -----------------------------------------------------------------------------------------------------------
[sub Cat1] [sub Cat2 [sub Cat3] [sub Cat4] [sub Cat5]

Das ich alle loops und Werte habe, ist fertig. Aber das Layout, denn es soll

1. Die Breite der Menüs nie breiter als die Seite. Falls nicht genug Platz, Zeilenumbruch
2. Die Links sollen immer auf das ganze DIV gehen. Damit das ganze Objekt markiert erscheint
3. Die FETT geschrieben Categorien sind die aktuell gewählten und sollten IMMER ganz links sein
4. Das Zeichen -> ist ein Platzhalter für eine kleine Grafik
5. Die roten Menüspunkte sollen zentriert sein (aber nicht auf die Seite gesehen sondern auf den Verbleibenden Platz (also Breite der Seite - aktuelle Cat))
6. Die zweite Linie soll um die Breiter Platzhaltergrafik einrücken
7. Falls möglich und nicht umgebrochen werden muss: Wenn sich die roten und grünen Menüpunkte nicht Platz haben, sollen Pfeile für links und rechts erscheinen und man sollte horizontal scrollen können
8. Responsive sicher

Wie kann ich das erreichen? Mein Code für HTML und CSS soweit ich es habe:

HTML:

<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');
$categoryFactory = $objectManager->create('Magento\Catalog\Model\ResourceModel\Category\CollectionFactory');
$subcats = $category->getChildrenCategories();

$CurrentParentCategories = $categoryFactory->create()                           
                            ->addAttributeToSelect('*')
                            ->addAttributeToFilter('level', array('eq'=>$category->getLevel()))
                            ->addAttributeToFilter('parent_id', ['eq'=>$category->getParentCategory()->getId()])
                            ->load();
              
$SecondParentCategories = $categoryFactory->create()                           
                            ->addAttributeToSelect('*')
                            ->addAttributeToFilter('level', array('eq'=>$CurrentParentCategories->getFirstItem()->getParentCategory()->getLevel()))
                            ->addAttributeToFilter('parent_id', ['eq'=>$CurrentParentCategories->getFirstItem()->getParentCategory()->getParentCategory()->getId()])
                            ->load();
# not first level
if ($SecondParentCategories->getFirstItem()->getLevel() > 1) {
?>
            <a style="display:inline-block" href="<?php echo $category->getParentCategory()->getUrl();?>" title="
                <?php echo $category->getParentCategory()->getName();?>" >
                <div class="parent-category-item-current">         
                    <?php echo $category->getParentCategory()->getName(); ?>
                </div>
            </a>
<div class="parent-category-slider">
            <?php                 
            foreach ($SecondParentCategories as $parentcat1) {
                if ($parentcat1->getIsActive() and $parentcat1->getId() != $category->getParentCategory()->getId() )
                {
                    $parentcat_url = $parentcat1->getUrl();
            ?>         
                    <a style="display:inline-block" href="<?php echo $parentcat_url;?>" title="<?php echo $parentcat1->getName();?>" > 
                    <div class="parent-category-item">
                        <p><?php echo $parentcat1->getName();?></p> 
                    </div>
                    </a>
            <?php                         
                    }
            }
            ?>
</div>

<?php
}
?>
            <a style="display:inline-block" href="<?php echo $category->getUrl();?>" title="
                <?php echo $category->getName();?>" >
                <div class="parent-category-item-current">         
                    <?php echo $category->getName(); ?>
                </div>
            </a>
<div class="parent-category-slider">
            <?php     
            foreach ($CurrentParentCategories as $parentcat) {
                if ($parentcat->getIsActive() and $parentcat->getId() != $category->getId())
                {
                    $parentcat_url = $parentcat->getUrl();
            ?>         
                    <a style="display:inline-block" href="<?php echo $parentcat_url;?>" title="<?php echo $parentcat->getName();?>" > 
                    <div class="parent-category-item">
                        <p><?php echo $parentcat->getName();?></p> 
                    </div>
                    </a>
            <?php                         
                }
            }
            ?>
</div>

<div class="category-slider">
        <?php 
            foreach ($subcats as $subcat) {
                if ($subcat->getIsActive()) {
                                    $sub_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());
                                    $subcat_url = $subcat->getUrl();
        ?>         
        <a style="display:inline-block" href="<?php echo $subcat_url; ?>" title="<?php echo $subcat->getName();?>"> 
            <div class="category-item">
                    <img src="<?php echo $sub_category->getImageUrl() ?>">
                <p><?php echo $subcat->getName(); ?></p> 
            </div>
        </a>
         <?php                         
        }
    } ?>
</div>

CSS:

.category-slider {
    margin: auto;
    width: 100%;
    border-bottom: 1px solid #b3b3b3;
    border-bottom-color: rgb(179, 179, 179);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.category-item {
    display: inline-block;
    width: 150px;
    height: 100px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.category-item:hover {
    color: #fff;
    background: #d04a14;
}
.category-item p {
    color: #000;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
}
.category-item img{
  height: 60px;
  vertical-align: middle;
}
.category-item:hover img{
    filter: grayscale(1) invert(100%);
}

.parent-category-slider {
    margin: auto;
    width: 100%;
    font-size: 12px;
    border-bottom: 1px solid #b3b3b3;
    border-bottom-color: rgb(179, 179, 179);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.parent-category-item {
    display: inline-block;
    width: 150px;
    height: 20px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.parent-category-item-current {
    display: inline-block;
    width: 130px;
    height: 16px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    color: #fff;
    background: #d04a14;
}

.parent-category-item:hover {
    color: #fff;
    background: #d04a14;
}