cancel
Showing results for 
Search instead for 
Did you mean: 

How to move custom link right after logo in custom theme?

How to move custom link right after logo in custom theme?

I have created custom link under

app\design\frontend\Myrwd\mytheme\Magento_Theme\layout\default.xml

<!-- location added in header -->
<referenceBlock name="header.links">
<block class="Magento\Framework\view\Element\Html\Link" name="custom-link" before="-">
<arguments>
<argument name="label" xsi:type="string" translate="true"> Custom Link </argument>
<argument name="path" xsi:type="string" translate="true"> customlink </argument>
</arguments>
</block>
</referenceBlock>

Now my custom link placed between customer link and minicart, how should place right after logo?

Workout :

In same path (app\design\frontend\Myrwd\mytheme\Magento_Theme\layout\default.xml)

I have added,

<move element="custom-link" destination="header-panel" after="logo" /> 

Its not working, how to solve the issue?

9 REPLIES 9

Re: How to move custom link right after logo in custom theme?

Hi @Aveeva ,

 

Try the below code in your default.xml file

<referenceBlock name="logo">
<block class="Magento\Framework\view\Element\Html\Link" name="custom-link" after="-">
<arguments>
<argument name="label" xsi:type="string" translate="true"> Custom Link </argument>
<argument name="path" xsi:type="string" translate="true"> customlink </argument>
</arguments>
</block>
</referenceBlock>

 

Clear cache.

 

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

Re: How to move custom link right after logo in custom theme?

@Nishu Jindal  I did following to achieve the task,

 

app\design\frontend\Myrwd\mytheme\Magento_Theme\layout\default.xml

 

 

		<!-- location added in header -->
		<referenceBlock name="header.links">
			<block class="Magento\Framework\view\Element\Html\Link" name="custom-link" before="-">
				<arguments>
					<argument name="label" xsi:type="string" translate="true"> Custom Link </argument>
					<argument name="path" xsi:type="string" translate="true"> customlink </argument>
				</arguments>
			</block>
		</referenceBlock>

 

 

in same file move element file using

 

 

<move element="custom-link" destination="header.panel" after="logo" />

 

My question, how to css for this link

 

Screenshot: https://i.stack.imgur.com/6DkK5.png

 

 

Re: How to move custom link right after logo in custom theme?

Hi @Aveeva ,

 

You can try setting the CSS class for the block (link) which you are adding in header links

 

<referenceBlock name="header.links">
			<block class="Magento\Framework\view\Element\Html\Link" name="custom-link" before="-">
				<arguments>
					<argument name="label" xsi:type="string" translate="true"> Custom Link </argument>
					<argument name="path" xsi:type="string" translate="true"> customlink </argument>
<argument name="class" xsi:type="string">custom-link</argument> </arguments> </block> </referenceBlock>

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

Re: How to move custom link right after logo in custom theme?

@Nishu Jindal Did you see my custom link there is black dot like list, how to remove this, see my inspect element there is <li>. How to remove the back dot

Re: How to move custom link right after logo in custom theme?

@Aveeva 

 

Can you please specify the below things:

1. is there any specific reason you are using 

Magento\Framework\view\Element\Html\Link

Class to create a custom link.

2. You can simply add a block class in logo reference block and render your  custom phtml file without <li> Tag.

First please remove your complete code.

Try this code:

<referenceBlock name="logo">
<block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::myCustomFile.phtml" after="-" />
</referenceBlock>

And in myCustomFile.phtml file 

 

<?php
<a href="" >Custom Link</a>
?>

 or you can manage the phtml file according to your need.

 

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

Re: How to move custom link right after logo in custom theme?

@Nishu Jindal  In which location to create myCustomFile.phtml 

 

my custom theme : app\design\frontend\Myrwd\mytheme\

 

FYI : I  am created custom theme which is inherit from blank theme.

Re: How to move custom link right after logo in custom theme?

Hi @Aveeva ,

 

You can add the  file in below location and mention the same in the block

app\design\frontend\Myrwd\mytheme\Magento_Theme\myCustomFile.phtml 

 

And edit block code like this:

<referenceBlock name="logo">
<block class="Magento\Framework\View\Element\Template" name="custom.block" template="Magento_Theme::myCustomFile.phtml" after="-" />
</referenceBlock>

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

Re: How to move custom link right after logo in custom theme?

@Nishu Jindal I have added following script under  app\design\frontend\Myrwd\mytheme\Magento_Theme\layout\default.xml

 

<referenceBlock name="logo">
    <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Magento_Theme::location_link.phtml" after="-" />
</referenceBlock>

and added location_link.phtml under

 

app\design\frontend\Myrwd\mytheme\Magento_Theme\location_link.phtml

 

<div class="container">
<div class="row">
<p>Custom link</p>
</dic>
</div>

Custom link not showing on header page?

Re: How to move custom link right after logo in custom theme?

@Nishu Jindal  After apply the code custom link not visible on header? Any help thanks.