0

Please see the below screenshot. I am trying to move the category menu and want to display HALF TITLE category before sign in header.

enter image description here

2
  • You can try this with jQuery after window load. Aug 22, 2020 at 10:16
  • @RiteshSantra that is not the right nor recommended way to do it Aug 22, 2020 at 16:02

1 Answer 1

0

You can not do it by just simply moving a block as a block will contain all the category so you can't move one category out of it. Below is a complete guide on how you can achieve this. (As just an example, I'm taking 'Training' category from defaults)

Point 1. First, you'll need to remove the category from the menu as shown:

enter image description here

To hide the category from the menu, go to admin panel > Categories and disable Include in Menu to No

enter image description here

Point 2. You'll need to add your custom block to the header, for that just create a default.xml to layout in a new module or use any existing module of yours. Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/custom.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <referenceBlock name="header.panel">
            <block class="Vendor\Module\Block\Training" name="training" template="Vendor_Module::training.phtml" after="-" />
        </referenceBlock>
    </body>
</page>

Point 3. Create a Block as mentioned in the layout which you'll be using to fetch the specific category data which you wish to move to the header. Vendor/Module/Block/Training.php

    <?php

    namespace Vendor\Module\Block;

    use Magento\Framework\View\Element\Template;

    class Training extends Template
    {
        protected $categoryRepository;

        public function __construct(
            \Magento\Catalog\Model\CategoryRepository $categoryRepository,
            \Magento\Framework\View\Element\Template\Context $context,
            array $data = []
        ) {
            $this->categoryRepository = $categoryRepository;
            parent::__construct($context, $data);
        }

        public function getCategoryLinks()
        {
            $categoryId = 9; //Parent ID of the Category which you want to move to the header
            $category = $this->categoryRepository->get($categoryId);
            return $category;
        }
    }

Point 4. Now create a template file mentioned in the layout which will contain the code to list out the category and its subcategories and display it on the screen, Vendor/Module/view/frontend/templates/training.phtml

    <?php
        $categoryCollection = $this->getCategoryLinks(); //Fetches categories from the Block method $getCategoryLinks
    ?>
    <div style="float:right;">
        <div class="navbar">
          <div class="dropdown">
            <span><a href="<?= $categoryCollection->getUrl(); ?>"><?= $categoryCollection->getName(); ?></a></span>
            <div class="dropdown-content">
                <?php
                    $subcategories = $categoryCollection->getChildrenCategories();
                    foreach ( $subcategories as $subcategory ) {
                        echo "<a href=".$subcategory->getUrl().">".$subcategory->getName()."</a>";
                    }
                ?>
            </div>
          </div> 
        </div>
    </div>

Point 5. Create a CSS file that will contain a code to list out the links in a navigation menu style format. Vendor/Module/view/frontend/web/css/custom.css (You can style and display data as per your need.)

.navbar a {
  color: white;
}

.navbar {
  overflow: hidden;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Final output:

enter image description here

I Hope, this will help you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.